0

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

             })
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.

             })

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

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

一种方法是隐藏所有的 children() #form_div;

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

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

有关演示，请参见jsFiddle。

于 2013-07-08T09:49:25.967 回答