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

Question

这里有一个与我类似的问题: 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。

看起来很简单，但我更喜欢 PHP，而不是 javascript，但这主要需要在 javascript 中完成(除了稍后的表单处理)。

提前感谢您的帮助!

Answer 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';
    }
};