Question

我在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');

             })

Answer 1

你可以这样做：

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

See udpated DEMO

Answer 2

为所有#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();

Answer 3

一种方法是隐藏#form_div;

的所有子（）

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

您还错过了选择器ID中的-;

请参阅jsFiddle了解演示。

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

3 个答案: