0

ドロップダウンを使用して、選択したオプションに基づいて div を表示/非表示にしています。表示/非表示は機能していますが、ページ上のすべての div を毎回非表示にするのではなく、個々のドロップダウンに関連する div のみを非表示にする必要があります。

個々のドロップダウンに関連する div のみを選択するにはどうすればよいですか?

http://jsfiddle.net/infatti/fj63g/7/

<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();

});
4

4 に答える 4

4

これを試して ：

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

});

デモ: http://jsfiddle.net/fj63g/8/

于 2013-02-07T20:19:06.303 に答える
0

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-07T20:21:30.390 に答える
0

ドロップダウン固有のクラス グループを使用します。

<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-07T20:21:55.480 に答える
0 
$('.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-07T20:20:28.803 に答える