基於使用jquery選擇另一個下拉列表來顯示/隱藏下拉列表

我需要顯示特定的下拉列表，並根據父下拉列表中的選擇來隱藏其他下拉列表。例如，我有父母下拉列表，其中選擇將進行：基於使用jquery選擇另一個下拉列表來顯示/隱藏下拉列表

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

其他3名單是：

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

因此，如果選擇了方案1應顯示，而其他應該在方案1名單隱藏反之亦然，如何使用jQuery

更新，以得到這個工作的任何想法：

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

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

對話形式具有所有的下拉列表

來源

2012-05-02 Mr A

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

來源

2012-05-02 13:17:25 Sethunath

能推薦分享'select's'中的類，沒有必要爲'each'因爲你可以馬上隱藏它們; '$（「＃DropDownList2，＃DropDownList1，＃DropDownList3」）。hide（）;':) – Stefan

我想隱藏父列表 –

@MrA哎呀！對不起，更新了代碼 – Sethunath

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

來源

2012-05-02 13:22:48 naspinski

我會修改HTML就簡化了JavaScript的;

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

來源

2012-05-02 13:35:59 Stefan

基於使用jquery選擇另一個下拉列表來顯示/隱藏下拉列表

回答

相關問題