在內部進行特定選擇時，如何創建文本字段 <select>元件？

Question

我正在嘗試創建一個包含幾個下拉選擇元素的基本Web表單。 這兩個元素都有一個“其他-請指定”選項，並且我希望每當選擇“其他”選項時，文本框都將自動出現在下拉框下方，並且如果將該選項更改為，則希望該文本框消失“其他”改為其他選項。

我對此無所適從，有人可以幫忙嗎？

Answer 1

jsfiddle上的工作代碼

JS：

document.getElementById("sid").onchange= function(){

    if(this.value == 'Other'){
       document.getElementById("other").style.display = '';
    }
    else{
          document.getElementById("other").style.display = 'none';
    }
}​

HTML：

<select id='sid'>
<option>1</option>
<option>2</option>
<option>Other</option>
</select>
<input id='other' style='display:none' /> ​

Answer 2

您可以使用CSS完成此操作。 嘗試此頁面http://www.coderanch.com/t/112986/HTML-CSS-JavaScript/Show-hidden-text-field 。

Answer 3

在您的選擇標簽上，您可以添加onchange =“ changed（）”屬性。 然后創建一個名為changed的javascript函數。

其余使用Jquery。

例如

function changed() {
    if($('#idOfSelect').val() == "Other") {
        $('#idOfSelect').after("<textbox>bla bla</textbox>");
    }
}

這樣的事情。

Answer 4

例子jsfiddle

的HTML

<select id="aDropDown">
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    <option value=other>Other</option>
</select>
<p id="aDropDownOther" class="other-label">Other Label</p>​

JS

var ele_aDropDownOther = document.getElementById('aDropDownOther');

document.getElementById('aDropDown').onchange = function() {
    if (this[this.selectedIndex].value === "other") {
        ele_aDropDownOther.style.display = "block";
    } else {
        ele_aDropDownOther.style.display = "";
    }
}​

的CSS

.other-label {display:none;}​

---

或類似地使用jQuery

例子jsfiddle

JavaScript / jQuery

var $aDropDown = $('#aDropDown'),
    $aDropDownOther = $('#aDropDownOther');

$aDropDown.change(function() {
    if ($aDropDown.val() === "other") {
        $aDropDownOther.show();
    } else {
        $aDropDownOther.hide();
    }
});​