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

Jクエリ

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

1 つのテキスト ボックスを作成し、必要な場所に配置して、それに応じてスタイルを設定します

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