使用jquery显示选定的元素块和其他元素none

我在html中有一个下拉菜单，它有3个选项，当我选择其中任何一个时，div的形式显示的块，但如果我选择另一个，上一个没有显示，那么我应该怎么做？保留一个区块，而其他区块没有

<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');
             })

您可以这样做：

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

请参阅预计的演示

为所有#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.
             })

此外，一种可能更优雅的解决方法是使用"Starts With Selector"，而不是给它们一个公共类；例如：

$('div[id^="walker"]').hide();

一种方法是隐藏#form_div的所有子级（）；

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

您还错过了选择器id中的-；

有关演示，请参阅jsFiddle。

相关内容

最新更新

热门标签：