Question

如果用户选择＆＃39;其他＆＃39; ，textfield＆＃39;指定＆＃39;应该出现，否则不会。

HTML：

    <select id="city">

    <option id="delhi" value="1"> Delhi </option>

    <option id="other" value="2"> - - other - -</option>

    </select>

<input type="text" name="specify" id="specify" size="20" placeholder="specify" class="formfield3"/>

我尝试过使用javascript：

window.onload = function() {

 document.getElementById('specify').style.display = 'none';
}

 document.getElementById('city').oninput(function () {

    if (document.getElementById('other').selected) {

        document.getElementById('specify').style.display = 'initial';

    } else {

        document.getElementById('specify').style.display = 'none';
    }
});

Answer 1

  window.onload = function() {
    var input = document.getElementById('specify');
    input.style.visibility = 'hidden';
    var city = document.getElementById('city');
    city.onchange = function () {
      if (city.options[city.selectedIndex].value == 2) {
      input.style.visibility = 'visible';
       } else {
      input.style.visibility = 'hidden';
     }
   }
}

fiddle

旁注：如果要在脚本中多次访问元素，最好存储对变量的引用。每次使用document.getElementBy时，都需要再次遍历DOM。

Answer 2

添加onchange以选择

<select onchange="changeFunction(this)">
    <option id="delhi" value="1"> Delhi </option>
    <option id="other" value="2"> - - other - -</option>
</select>

<input id="specifyInput" type="text" size="20" placeholder="specify" class="formfield3"/>

然后在javascript中

function changeFUnction(ctrl)
{
    if(ctrl.value==2)
       {
           //Hide - display
       }
     else
       {
           //Hide display
       }
}

Answer 3

使用onchange事件：

JavaScript的：

var city = document.getElementById("city"),
    specify = document.getElementById("specify");

city.onchange = function(){
    if(city.value == 1) 
        specify.style.display = "none";
    else 
        specify.style.display = "inline";
}

Demo

Answer 4

在更改时调用函数并将id添加到input：

<select onchange="changeFUnction()">
    <option id="delhi" value="1"> Delhi </option>

    <option id="other" value="2"> - - other - -</option>
</select>

<input id="specifyInput" type="text" size="20" placeholder="specify" class="formfield3"/>

的javascript：

function changeFUnction()
{
    if(city.value=="2")
       specifyInput.style["visibility"]="visible";
    else
       specifyInput.style["visibility"]="hidden";

}

如何隐藏/显示用户选择的输入字段？

4 个答案: