0

選択したドロップダウンオプションに基づいてdivを表示/非表示にするスクリプトが機能しています。

ユーザーがドロップダウンで選択する前に、最初のdivを除くすべてのdivを非表示にする必要があります。

以下のスクリプトに基づいて、最初のオプションを除くすべてのオプションから値を取得して、最初のdivを除くすべてのdivを非表示にするにはどうすればよいですか？

$('.dd-show-hide').find('option:not(:first)').val().hide();

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


<select class="dd-show-hide">
    <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>
4

3 に答える 3

3

firstセレクターとnotメソッドを使用できます。

$('.drop-down-show-hide').not(':first').hide();

eachchange イベントをトリガーするか、メソッドを使用する必要はありません。

var $divs = $('.drop-down-show-hide');
$('.dd-show-hide').change(function(){
   $divs.hide().filter('[id='+this.value+']').show();
}).change();
于 2013-02-07T20:52:11.630 に答える
0

一般的に言えば、JQuery で「_を除くすべてのものを非表示にする」必要がある場合は、それらをすべて非表示にしてから、必要なものを表示する方が便利です。これにより、最初の部分以外がすべて非表示になります。

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

これは、現在選択されているオプションに基づいて非表示になります。

$('.drop-down-show-hide').hide().filter('#' + $('.dd-show-hide').val()).show();

これは、最初のオプションに基づいて非表示になります (必ずしも現在選択されているオプションではない場合でも)

$('.drop-down-show-hide').hide().filter('#'+$('.dd-show-hide option:first').val()).show()

ID を 1 つずつ確認する必要はありません。ドロップダウンで選択したもののみを表示し、その他を非表示にするには:

$('.dd-show-hide').change(function() {
   $('.drop-down-show-hide').hide().filter('#' + this.value).show();
});
于 2013-02-07T20:53:23.247 に答える
0

これを試して。あなたはほとんどそれを持っていました：

$('.dd-show-hide').find('option').each(function(){
      if ('div1' != this.value) {
          $('#' + this.value).hide();
      } else {
          $('#' + this.value).show();
      }
 });
于 2013-02-07T20:53:43.687 に答える