0

HTMLにドロップダウンが1つあり、3つのオプションがあります。それらのいずれかを選択すると、フォームdivが表示されますブロックが表示されますが、他のものを選択すると、前のものは表示されず、何も表示されません。1 つのブロックを保持し、他は何も保持しない

<select id="walker" name="walker">
<option value="">Select Walker</option>
<option value="1">walker1</option><option value="2">walker2</option><option value="3">walker3</option></select>

<div id="form_div">
<div id="walker1" style="display:none;"></div>  
<div id="walker2" style="display:none;"></div>
<div id="walker3" style="display:none;"></div>
</div>

      $("#walker").change(function(){
               var numwalker= parseInt($("select#walker option:selected").val()); 

               $('#walker'+numwalker).css('display','block');

             })
4

3 に答える 3

3

次のようにできます。

$('#walker'+numwalker).show().siblings().hide();

更新されたデモを見る

于 2013-07-08T09:44:52.553 に答える
1

選択したものを表示する前に#walker、すべてに共通のクラスを与え、それらをすべて非表示にします。

<select id="walker" name="walker">
<option value="">Select Walker</option>
<option value="1">walker1</option><option value="2">walker2</option><option value="3">walker3</option></select>

<div id="form_div">
<div class="walkers" id="walker1" style="display:none;"></div> 
<div class="walkers" id="walker2" style="display:none;"></div>
<div class="walkers" id="walker3" style="display:none;"></div>
</div>

$("#walker").change(function(){
               var numwalker= parseInt($("select#walker option:selected").val()); 
               $('.walkers').hide();  // <-- Hide all of them
               $('#walker'+numwalker).show()  // You can use .show() instead of altering the css.

             })

また、それを解決するよりエレガントな方法は、共通のクラスを与える代わりに「セレクターで始まる」を利用することです。そのような：

$('div[id^="walker"]').hide();
于 2013-07-08T09:44:58.497 に答える
0

#form_div1 つの方法は、 ;のすべての children() を非表示にすることです。

$("#form_div").children().hide();
$('#walker-'+numwalker).show();

-セレクター IDの も見逃しました。

デモについては、 jsFiddleを参照してください。

于 2013-07-08T09:49:25.967 に答える