多个选择选项与一个#id显示n隐藏表
问题描述:
我有一个关于选择选项的问题。我想显示n隐藏我的表格n div与我的许多选择相同的ID选项,但结果只在第一选择选项有效。我真的需要你的帮助,以便我所有的选择选项都使用相同的ID。帮助我们......! ...多个选择选项与一个#id显示n隐藏表
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#sts').change(function() {
$('div.number').hide();
$('table.number').hide();
$('#number' + $(this).val()).show();
}).change();
});
</script>
...
<select name="" id="sts" class="form-select required">
<option value="">- select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<select name="" id="sts" class="form-select required">
<option value="">- select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<div id="number1" class="number">Option 1</div>
<div id="number2" class="number">Option 2</div>
<div id="number3" class="number">Option 3</div>
答
尝试
$('*#sts').change(function() {...});
答
通常一个HTML元素的id
属性必须是唯一的。所以,请更改代码以
<select name="" id="sts" class="form-select required">
<option value="">- select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<select name="" id="sts1" class="form-select required">
<option value="">- select -</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<div id="number1" class="number">Option 1</div>
<div id="number2" class="number">Option 2</div>
<div id="number3" class="number">Option 3</div>
现在使用的代码通过获取select
元素做处理通过their class
名称:
<script type="text/javascript">
$('select.form-select').change(function() {
$('div.number').hide();
$('table.number').hide();
$('#number' + $(this).val()).show();
});
</script>
同** **号对于多个元素将导致** id **碰撞。尝试为此使用名称属性。 – 2012-07-18 05:31:13