选择选项隐藏和显示

时间:2013-10-16 05:50:04

标签: javascript jquery html

<select id="dropdownPName" name="company">
  <option value="A">Comapny A</option>
  <option value="B">Company B</option>
  <option value="Walk-in">Walk-in</option>
  <option value="Others">Others</option>
</select>

我想,如果选中的是“其他”,则会出现一个文本框,以便用户指定公司

2 个答案:

答案 0 :(得分:2)

Textbox html

<input type="text" id="cmpny_txbx" name="cmpny_txbx" />

Jquery的

$(document).ready(function(){
  $("#cmpny_txbx").hide();
  $("#dropdownPName").change(function(){
   if($("#dropdownPName").val() == 'Others'){
      //Show text box here
      $("#cmpny_txbx").show();
   }
   else{
     //Hide text box here
     $("#cmpny_txbx").hide();
   }
    });
});

参见 DEMO

答案 1 :(得分:0)

创建一个文本框,将其放在您想要的位置并相应地设置样式

<input type="text" id="comp" name="othercompany" placeholder="Enter company name" style="display:none;" />

要获取您使用的选择框的值

pName = document.getElementById('dropdownPName');
var value = pName.options[pName.selectedIndex].value;
if(value.toLowerCase() == 'others')
{
    var ele = document.getElementById('comp');
     ele.style.display = "block";
}