jqueryを使用して別のドロップダウンリストの選択に基づいてドロップダウンリストを表示/非表示

Question

特定のドロップダウンリストを表示し、親のdropdownlistでの選択に基づいて他のドロップダウンリストを非表示にする必要があります。 は、例えば、私は選択の親ドロップダウンリストを持って行われます。

<select id="DropDownList1"> 
        <option value="Schemes1">Schemes1</option> 
        <option value="Schemes2">Schemes2</option> 
        <option value="Schemes3">Schemes3</option> 
       </select> 

他の3のリストは以下のとおりです。scheme1が選択されている場合は他の人がすべきながら

   <p>Schemes1 List</p> 
       <select id="DropDownList2"> 
       <option value="product1">Camera</option> 
       <option value="product2">DVD</option> 
       <option value="product3">AC</option> 
      </select> 
      <p>Schemes2 List</p> 
       <select id="DropDownList3"> 
       <option value="product4">bat</option> 
       <option value="product5">ball</option> 
       <option value="product6">complete kit</option> 
      </select> 
      <p>Schemes3 List</p> 
       <select id="DropDownList4"> 
       <option value="product7">laptop</option> 
       <option value="product8">HD</option> 
       <option value="product9">RAM</option> 
      </select> 

のでscheme1リストが表示されるはずです

$('#login').click(function (e) { 
        e.preventDefault(); 

        $("#dialog-form").dialog("open"); 
       }); 

：隠されたその逆の、jqueryの

更新

を使用してこの作業を取得する方法上の任意のアイデアがあること

ダイアログフォームJavaScriptを簡素化するか、私はHTMLを修正するだろう

Answer 1

$("#DropDownList1").change(function(){ 
    indx = $("#DropDownList1 option:selected").index(); 
    indx +=1; 
    $("#DropDownList2,#DropDownList3,#DropDownList4").each(function(){ 
     $(this).hide(); 
    }); 
    $("#DropDownList"+(indx+1)).show() 
}) 

Answer 2

$('#DropDownList1').change(function(){ 
    id = $(this).val().replace('Scheme',''); //get id 
    $('#DropDownList2,#DropDownList3,#DropDownList4').hide(); 
    $('#DropDownList'+id).show(); 
}) 

Answer 3

すべてのドロップダウンリストを持っています。

HTML

<select id="DropDownList1"> 
    <option value="DropDownList2">Schemes1</option> 
    <option value="DropDownList3">Schemes2</option> 
    <option value="DropDownList4">Schemes3</option> 
</select> 

<p>The other 3 list are:</p> 

<p>Schemes1 List</p> 
<select id="DropDownList2" class="toggledDropDown"> 
    <option value="product1">Camera</option> 
    <option value="product2">DVD</option> 
    <option value="product3">AC</option> 
</select> 

<p>Schemes2 List</p> 
<select id="DropDownList3" class="toggledDropDown"> 
    <option value="product4">bat</option> 
    <option value="product5">ball</option> 
    <option value="product6">complete kit</option> 
</select> 

<p>Schemes3 List</p> 
<select id="DropDownList4" class="toggledDropDown"> 
    <option value="product7">laptop</option> 
    <option value="product8">HD</option> 
    <option value="product9">RAM</option> 
</select>​ 

はJavaScript

$('#DropDownList1').change(function() { 

    // Hide all drop downs sharing the CSS class "toggledDropDown". 
    $('.toggledDropDown').hide(); 

    // Build a selector for the selected drop down 
    var selector = ('#' + $(this).val()); 

    // Show the selected drop down 
    $(selector).show(); 

}); 

View demo