如果单击某些选择选项，则在表单上输入自定义值答案

【问题标题】：Entering a custom value on form if certain select option was clicked如果单击某些选择选项，则在表单上输入自定义值
【发布时间】：2014-02-03 12:39:22
【问题描述】：

这里有一个与我类似的问题： change select box into text box in javascript

但是，这并不能完全解决我想要做的事情。所以我将使用他们的工作代码，接近我想要做的事情，然后从那里进行详细说明。

这是他们目前的工作代码： http://jsfiddle.net/SivaCharan/CT8TT/1/

Javascript：

var dropDown = document.getElementById("dropdown")
dropDown.onchange = function() {
    var dropDownValue = this.options[this.selectedIndex];
    dropDown.style.display = 'none';

    var textBox = document.getElementById("textbox");
    textBox.style.display = 'block';
    textBox.value = dropDownValue.text;
};

但这就是我想要的，但我不知道该怎么做：

在此代码的版本中，选择选项时，选择框会在一个文本框中转换为文本框。并且文本（不是值）会自动放置在该文本框中。

但我希望文本框仅在选择某个项目（与其中任何一个项目相对）时出现，并且默认值自动出现在文本框中。

解释我在做什么，以便您更好地理解：

这是一个简单的捐赠按钮。人们选择预先确定的金额（前几个选项） - 或者 - 他们选择最后一个选项，即“自定义金额”。如果他们选择“自定义金额”，选择框会变成一个带有 0.00 的文本框。

看起来很简单，但与 javascript 相比，我更像是一个 PHP 人，但这需要主要在 javascript 中完成（除了稍后的表单处理）。

提前感谢您的帮助！

【问题讨论】：

这只是一个if 语句，它们在 PHP 和 Javascript 中几乎相同。
原代码真的有效吗？我不认为text 是一个有效的属性，它应该是innerText。
看看这个..jsfiddle.net/CT8TT/96
如果他们想返回菜单中的某个值怎么办？如果选择框消失了，他们怎么办？
如果他们改变主意，为什么还要被困住？如果他们决定迟于他们想要的第一个选项之一，他们可以输入该数字作为自定义值（或只是重新加载表单）。

标签： javascript forms select textbox

【解决方案1】：

var dropDown = document.getElementById("dropdown")
dropDown.onchange = function() {
    var dropDownValue = this.value;
    if (dropDownValue == "custom") { // This tests for the `<option value="custom">
        dropDown.style.display = 'none';
        var textBox = document.getElementById("textbox");
        textBox.style.display = 'block';
        textBox.value = '0.0';
    } else {
        dropDown.style.display = 'block';
        textBox.style.display = 'none';
    }
};

【讨论】：

谢谢。我将“块”更改为“内联”，以防止表单下方的额外空间出现在选项更改中，但除此之外，非常完美。

【解决方案2】：

http://jsfiddle.net/CT8TT/95/

var dropDown = document.getElementById("dropdown")
dropDown.onchange = function() {
  var dropDownValue = this.options[this.selectedIndex];
  if (dropDownValue.value == 4) {
    dropDown.style.display = 'none';

    var textBox = document.getElementById("textbox");
    textBox.style.display = 'block';
    textBox.value = dropDownValue.text;
  }
};

您可以检查特定值，并且只针对该特定值进行检查。要设置文本的值，您需要编写 dropDownValue.value 而不是 dropDownValue.text 用于 textBox.value.

【讨论】：

【解决方案3】：

  dropDown.onchange = function() {
    var dropDownValue = this.options[this.selectedIndex].value;
    if (dropDownValue != "Custom Amount")
        return;
    dropDown.style.display = 'none';

    var textBox = document.getElementById("textbox");
    textBox.style.display = 'block';
    textBox.value = dropDownValue.text;
};

【讨论】：

【解决方案4】：

dropDown.onchange = function() {
    var dropDownValue = this.options[this.selectedIndex];
    if (dropDownValue.text != "Custom Amount")
        return;
    dropDown.style.display = 'none';

    var textBox = document.getElementById("textbox");
    textBox.style.display = 'block';
    textBox.value = dropDownValue.text;
};

你也可以 - 如果你不喜欢匹配字符串值 - 检查 this.selectedIndex == this.options.length （检查所选项目是否是最后一个）

【讨论】：

也只是为了惹恼 JavaScript 粉丝，我用 != 代替 !== 和 == 代替 === :P

【解决方案5】：

您可以使用 CSS 类来确定必须成为 textField 的值。

http://jsfiddle.net/bruno2c/CT8TT/97/

例子：

   var dropDown = document.getElementById("dropdown")
dropDown.onchange = function () {
    var dropDownValue = this.options[this.selectedIndex];
    if (hasClass(dropDownValue, 'custom')) {
        dropDown.style.display = 'none';
        var textBox = document.getElementById("textbox");
        textBox.style.display = 'block';
        textBox.value = dropDownValue.text;
    }
};
// http://sonnyt.com/javascript-check-if-element-has-class/
function hasClass(element, className) {
    return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}

【讨论】：

【解决方案6】：

var dropDown = document.getElementById("dropdown")
dropDown.onchange = function() {
    var dropDownValue = this.options[selectedIndex];
    dropDown.style.display = 'none';

    var textBox = document.getElementById("textbox");
    textBox.style.display = 'block';
    textBox.value = dropDownValue.text;
};

【讨论】：