Jquery/Js:基于复选框选项值的隐藏/显示Divs
Jquery/Js:基于复选框选项值的隐藏/显示Divs
提问于 2012-05-29 04:29:24
这些是动态依赖的选择控件。(1-3，4-6，7-9)的一组值决定了使用隐藏/显示divs函数。问题是，根据div id，我只能隐藏/显示函数。如何使函数隐藏/显示div取决于选择框中的值(1-3、4-6、7-9)？
Jquery
$('#select').change(function() {
$('#sub1, #sub2, #sub3').hide();
$('#sub' + $(this).find('option:selected').attr('id')).show();
});Html设置
<html>
<select size="6" id="category">
<option value="">categories 1-3 </option>
<option value="">----</option>
<option value="">----</option>
</select>
<div id="sub1" style="display:none">
<select name="subc1" size="6">
<option value="1">subcategories 4-6</option>
<option value="2">---</option>
<option value="3">---</option>
</select>
</div>
<div id="sub2" style="display:none">
<select name="subc2" size="6">
<option value="4">subcategories 7-9</option>
<option value="5">----</option>
<option value="6">----</option>
</select>
</div>
<div id="sub3" style="display:none">
<select name="subc3" size="6">
<option value="7">End</option>
<option value="8">----</option>
<option value="9">----</option>
</select>
</div>
</html>回答 4
Stack Overflow用户
回答已采纳
发布于 2012-05-29 05:12:53
您需要更改您的类别select中的小更改
<select size="6" id="category">
<option value="1">categories 1-3 </option>
<option value="2">----</option>
<option value="3">----</option>
</select>
$('select#category').on('change', function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});也可以使用.change()代替.on('change')。
$('select#category').change(function() {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
});注：
$('div[id=^sub]:visible')将指向所有具有id从sub和visible开始的div。
您正在尝试使用$('#select')，它需要是$('#category')或$('select#category')。
根据您的评论：
完整的解决方案如下所示：
function isOnlyDashed(text) {
return text.replace(/-/g, '').length === 0;
}
$('select#category').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$('div[id=^sub]:visible').hide();
$('div#sub' + this.value).show();
}
});
$('select[name^=subc]').change(function() {
var text = $('option:selected', this).text();
if (!isOnlyDashed(text)) {
$(this).parent() // jump to parent div
.next('div[id^=sub]:hidden') // go to next hidden div
.show();
}
});完全锻炼
Stack Overflow用户
发布于 2012-05-29 04:42:17
从下拉更改函数中选择值，并根据下拉值执行操作，下面是示例代码
$(function() // Shorthand for $(document).ready(function() {
$('select').change(function() {
if($(this).val() == 1)
{
$('#sub1').hide();
$('#sub2').show();
}
});
});Stack Overflow用户
发布于 2012-05-29 04:37:50
代码的问题是您的选择器不正确。
$('#select')...应该是
$('select')...另外，这部分是错误的
$('#sub' + $(this).find('option:selected').attr('id')).show();用这个代替它
$('#sub' + $(this).val()).show();最后，使用同名/id "sub1“的不同元素可能是个坏主意，尽管在技术上并不违法。这无疑是令人困惑的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10793078
复制相关文章
相似问题
腾讯云开发者
