1

フォームのドロップダウン フィールドの選択値に応じてコンテンツを表示/非表示にできる、見つけた jquery スクリプトを実装しようとしています。

それはある程度機能しますが、ページが読み込まれたときにすべてのコンテンツを非表示にし、選択値に応じて関連するコンテンツのみを表示する必要があります。現時点では、ページが読み込まれるとすべてのコンテンツが表示され、値を選択すると期待どおりにコンテンツを表示/非表示にすることができます。

最初にすべてのコンテンツを非表示にするにはどうすればよいですか?

これが私がこれまでにテストしたものです：

<select id="viewSelector">
<option value="0">-- Select a View --</option>       
<option value="view1">view1</option>
<option value="view2">view2</option>
<option value="view3">view3</option>
</select>

<div id="view1">
<p>a</p> 
</div>
<div id="view2a">
<p>b</p> 
</div>
<div id="view2b">
<p>c</p> 
</div>
<div id="view3">
<p>d</p> 
</div>

そしてjQueryは次のとおりです。

$(document).ready(function() {
$.viewMap = {
    '0' : $([]),
    'view1' : $('#view1'),
    'view2' : $('#view2a, #view2b'),
    'view3' : $('#view3')
  };

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
    // show current
    $.viewMap[$(this).val()].show();
  });
});

ここにテストページへのリンクがあるので、私が何を意味するかを見ることができます：

http://sitesforasnip.com/form/testform.html

どうもありがとう

4

3 に答える 3

0

フォーム onload イベントを追加し、この onload 関数内の最初のすべてを非表示にする機能を追加するか、代わりに .show() メソッドを使用して .hide 関数を使用すると、自動的にこれが行われます。

于 2013-05-30T11:11:35.057 に答える
0 
$(document).ready(function() {
   $('#view1').hide();
   $('#view2a').hide();
   $('#view2b').hide();
   $('#view3').hide();

   $.viewMap = {
     '0' : $([]),
     'view1' : $('#view1'),
     'view2' : $('#view2a, #view2b'),
     'view3' : $('#view3')
   };

   $('#viewSelector').change(function() {
   // hide all
   $.each($.viewMap, function() { this.hide(); });
    // show current
    $.viewMap[$(this).val()].show();
     });
   });

まず、hide 関数を使用してすべての div を非表示にします。

于 2013-05-30T11:06:19.343 に答える