他の選択肢のオプションが選択された場合にのみ選択を表示する方法は？

Question

ページに4つの選択肢があり、最初のものだけが見えます。また、第1の選択は、基本的なプロンプト文字列を持っています次のように人を選択してください：

<select name="post[person_id]"> 
    <option value="">Choose person</option> 
    <option value="1">David</option> 
    <option value="2">Sam</option> 
    <option value="3">Tobias</option> 
</select> 

ユーザーが最初のドロップダウンから、いくつかのオプションを選択すると、他の3つの選択を表示することがあります。

これを実装する方法は？

Answer 1

onchangeのメソッドを使用する必要があります。第1の選択使用するため

<select onchange="myFunction()"> 

<script> 
function myFunction(){ 

// fetch new data for the next select. 

//append the new options on next select. 

// make select available or enabled 

} 

</script> 

onchange には（移入）フェッチ 次選択のオプション。そして、次の選択について同じことをします。

また、完了したインスタンスでフェッチして、選択を入力することもできます。

ご使用にならない場合jQueryオプションを追加することができます

Answer 2

ここでは簡単なjqueryソリューションです。キーは.changeイベントを使用し、プルダウンにプルダウンします。

HTML

<select id="controllerDD"> 
     <option value="">Select...</option> 
     <option value="Show 1">Show 1</option> 
     <option value="Show 2">Show 2</option> 
     <option value="Show All">Show All</option> 
    </select> 
    <p>DD 1</p> 
    <select id="DD1" style="display:none"> 
     <option value="blah">Select...</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
    </select> 
    <p>DD 2</p> 
    <select id="DD2" style="display:none"> 
     <option value="blah">Select...</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
     <option value="blah">blah</option> 
    </select> 

はJavaScript

$('#controllerDD').change(function (e) { 
    var selected = $(e.currentTarget).val(); 
    $('#DD1').hide(); 
    $('#DD2').hide(); 
    switch (selected) { 
     case "Show 1": 
      $('#DD1').show(); 
      break; 
     case "Show 2": 
      $('#DD2').show(); 
      break; 
     case "Show All": 
      $('#DD1').show(); 
      $('#DD2').show(); 
      break; 
     default: 
      break; 
    } 
})