javascript - 选择选项隐藏和显示

Question

<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>

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

Answer 1

文本框 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();
   }
    });
});

见演示

Answer 2

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

<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";
}