使用下拉菜單來顯示/隱藏div

我正在使用下拉菜單來顯示/隱藏基於所選選項的div。顯示/隱藏正在工作，但我需要隱藏與每個單獨下拉菜單相關的div，而不是每次隱藏頁面上的所有div。使用下拉菜單來顯示/隱藏div

如何才能選擇與每個單獨下拉菜單相關的div？

<select id="dropDown"> 
    <option>Choose</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

<hr /> 

<select id="dropDown2"> 
    <option>Choose</option> 
    <option value="div3">Show Div 3</option> 
    <option value="div4">Show Div 4</option> 
</select> 

<div id="div3" class="drop-down-show-hide">div 3</div> 
<div id="div4" class="drop-down-show-hide">div 4</div> 


$('.drop-down-show-hide').hide(); 

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

    $('.drop-down-show-hide').hide(); 
    $('#' + this.value).show(); 

}); 

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

    $('.drop-down-show-hide').hide(); 
    $('#' + this.value).show(); 

});

來源

2013-02-07 simple

試試這個：

$('#dropDown').change(function(){ 
    $(this).find("option").each(function(){ 
     $('#' + this.value).hide(); 
    }); 
    $('#' + this.value).show(); 

});

演示：http://jsfiddle.net/fj63g/8/

來源

2013-02-07 20:19:06 mgraph

你打我吧... –

和'＃dropDown'可改爲一類 –

好和使用類，而不是一個ID使它更便攜！ – simple

$('.drop-down-show-hide').hide(); 

$('#dropDown, #dropDown2').change(function(){ 

    $(this).find('option').each(function(){ 
     $('#'+$(this).val()).hide(); 
    }); 

    $('#' + this.value).show(); 

});

http://jsfiddle.net/3aRxW/1/

來源

2013-02-07 20:20:28

如何改變CL每套div的驢是獨一無二的？像：

<select id="dropDown"> 
    <option>Choose</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

<hr /> 

<select id="dropDown2"> 
    <option>Choose</option> 
    <option value="div3">Show Div 3</option> 
    <option value="div4">Show Div 4</option> 
</select> 

<div id="div3" class="drop-down-show-hide2">div 3</div> 
<div id="div4" class="drop-down-show-hide2">div 4</div> 


$('.drop-down-show-hide').hide(); 

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

    $('.drop-down-show-hide').hide(); 
    $('#' + this.value).show(); 

}); 

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

    $('.drop-down-show-hide2').hide(); 
    $('#' + this.value).show(); 

});

來源

2013-02-07 20:21:30

使用下拉特定類羣體：

<div id="div1" class="dd_group1">div 1</div> 
<div id="div2" class="dd_group1">div 2</div> 

<div id="div3" class="dd_group1">div 3</div> 
<div id="div4" class="dd_group1">div 4</div> 

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

    $('.dd_group1').hide(); 
    $('#' + this.value).show(); 

}); 

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

    $('.dd_group2').hide(); 
    $('#' + this.value).show(); 

});

來源

2013-02-07 20:21:55 Scruffy

使用下拉菜單來顯示/隱藏div

回答

相關問題