HTML/Jquery Hiding+Showing依赖项
HTML/Jquery Hiding+Showing依赖项
提问于 2012-09-29 04:17:09
所以我有一个下拉列表和几个复选框。该下拉列表与用户只能选择一个选项的主要选项有关。复选框属于第二个选项，在该选项中，用户可以选择任意多个选项，但从下拉列表中选择的选项不会显示为选项之一。到目前为止，我的代码如下：fiddle
因此，例如，如果用户从下拉列表中选择选项1，那么应该只有option2-8可用作复选框。我想从本质上隐藏option1，并显示其余部分。我真的不知道这叫什么，所以我不知道要搜索什么，也不知道去哪里找。我想看看有没有什么jquery插件可以做到这一点，但是我该怎么做呢？谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-09-29 04:53:05
迈克尔，试试这个：
javascript
$(function(){
$('#primary').on('change', function() {
var $sec = $('.secondary');
var idx = this.selectedIndex;
$sec.find('input').attr('disabled', false).eq(idx).attr('disabled', true);
$sec.find('label').removeClass('disabled').eq(idx).addClass('disabled');
}).trigger('change');
});CSS：
.disabled {
color: gray;
}我稍微偏离了简要说明，禁用而不是隐藏不需要的复选框。这可能不会让用户感到困惑。如果不是，那么很容易修改代码来隐藏/显示：
$('#primary').on('change', function() {
$('.secondary').find('label').show().eq(this.selectedIndex).hide();
}).trigger('change');Stack Overflow用户
发布于 2012-09-29 04:23:20
Check this DEMO
您不需要为它添加插件..简单的jQuery应该足够了
尝尝这个
$('#primary').on('change', function() {
// Show all the options initially
$('.secondary label').show();
// Get the currently selected option
var selected = $(this).val();
// Hide the label that encases the option
$('.secondary').find('input[type="checkbox"][value="'+ selected + '"]').closest('label').hide();
}).change();更新了代码
为此，您需要创建checkboxe的模板，该模板可用于在选择更改时填充设计。
$('#primary').on('change', function() {
// Clone the checkbox template
var $template = $('.template').clone();
var selected = $(this).val();
// Remove the selected option from cloned object
$template.find('input[type="checkbox"][value="'+ selected + '"]').closest('label').remove();
// Append to the DropDown
$('.secondary').html( $template.html() );
}).change();UPDATED FIDDLE
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12646820
复制相关文章
相似问题
腾讯云开发者
