所以我有一个下拉列表和几个复选框。下拉列表与用户只能选择一个选项的主要选择有关。复选框属于次要选择，用户可以选择任意数量的选项，但他们从下拉列表中选择的选项不会显示为选项之一。到目前为止，这是我的代码：fiddle
因此，例如，如果用户从下拉列表中选择选项 1，则只有选项 2-8 应可用作复选框。我想基本上隐藏 option1 并显示其余部分。我真的不知道这叫什么，所以我不知道要搜索什么或在哪里看。我想看看是否有某种 jquery 插件可以解决这个问题，但我应该怎么做呢？谢谢
【问题讨论】：
标签： jquery html select drop-down-menu dependencies
迈克尔，试试这个：
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');
【讨论】：
你不需要插件。简单的 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();
更新代码
为此，您需要创建一个复选框模板，该模板可用于在选择更改时填充设计..
$('#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();
【讨论】：