具有一个#id的多选选项可显示n个隐藏表
multiple select option with one #id to show n hide table
我对select选项有问题。我想用具有相同id的many-select选项显示n隐藏我的表ndiv,但结果仅在first-select选项中有效。我真的需要你的帮助,这样我所有的选择都可以使用相同的id。帮帮我,伙计们。。!…
<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>
现在使用代码通过their class
名称获取select
元素来进行处理:
<script type="text/javascript">
$('select.form-select').change(function() {
$('div.number').hide();
$('table.number').hide();
$('#number' + $(this).val()).show();
});
</script>
相关文章:
- 在jquery中为显示/隐藏设置cookie
- PHP Javascript显示/隐藏按钮不工作
- 打开/关闭按钮以显示/隐藏内容
- 显示隐藏复选框
- 在bootstrap中显示隐藏特定的li
- JQuery上下文菜单显示/隐藏问题
- JQuery在单击时停止显示/隐藏
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 使用 jQuery 切换显示/隐藏
- 显示/隐藏有关模型更改的指令内容
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 显示/隐藏不起作用
- 使用ng-hide根据条件显示/隐藏按钮
- 仅在第一个结果中显示/隐藏MySQL结果函数
- 显示/隐藏http://ftp链接
- 在显示/隐藏中单击时删除的文本
- 是否可以在不重新渲染的情况下显示/隐藏父对象中的元素
- 将页面内容向左移动时显示/隐藏右侧面板
- 显示/隐藏将不会加载