0

ここの別のスレッドで次のコードを見つけて、Jquery ドロップダウン メニューを作成しました。

$(document).ready(function() {
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

HTMLは次のようになります

<select id="myselector">
   <option value="state1">State 1</option>
   <option value="state2">State 2 </option>
   <option value="state3">State 3</option>
</select>

<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div>
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div>
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div>

これは 1 つの問題を除いて問題なく機能します。ページが読み込まれると、3 つのオプションすべてのテキストが表示されます。ただし、オプションを選択すると、他のテキストは消えて、関連するテキストのみが表示されます。3 つのオプションすべてのテキストが読み込まれるのはなぜですか? ユーザーが別のオプションを選択するまで、最初のオプションのテキストのみが表示されるように修正するにはどうすればよいですか? 助けてくれてありがとう。

4

4 に答える 4

1

あなたはこれを試すことができます:

$(document).ready(function() {

   $('.statecontent').hide();
   $('#' + $('#myselector').val()).show();
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

これが作業中のフィドルです

于 2012-08-31T19:59:43.310 に答える
1
$(document).ready(function() {
  // this is for the case an option comes selected from server
  showRelatedDiv();

   $('#myselector').change(function(){
       showRelatedDiv();
   });
});

function showRelatedDiv(){
   $('.statecontent').hide();
   $('#' + $('#myselector').val()).show();        
}
于 2012-08-31T19:53:55.673 に答える
1

次のように、ページの読み込み時に変更イベントをトリガーするだけです。

$(function() {
   $('#myselector').on('change', function(){
      $('#' + this.value).show().siblings('.statecontent').hide();    
   }).change();
});​

フィドル

于 2012-08-31T19:55:48.880 に答える
0

ページがロードされたら、いくつかの処理を実行する必要があります。フィルタリングは、変更イベントが発生したときにのみ開始されます。

$(document).ready(function() {
   //Hide all states on load
   $('.statecontent').hide();
   //Determine which state is selected and show
   $('#' + $('#myselector').val()).show();

   //Bind the change event.
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

作業例: http://jsfiddle.net/7cEXZ/

于 2012-08-31T19:55:54.577 に答える