Question

所以我有一个下拉列表和几个复选框。下拉列表属于主要选项，用户只能选择一个选项。复选框属于辅助选项，用户可以根据自己的喜好选择多个选项，但是从下拉列表中选择的复选框不会显示为选项之一。到目前为止，这是我的代码：fiddle

因此，例如，如果用户从下拉列表中选择选项1，则只有option2-8可用作复选框。我想基本上隐藏option1并显示其余部分。我真的不知道这叫什么，所以我不知道要搜索什么或在哪里看。我想看看是否有一些jquery插件，但我应该怎么做呢？感谢

Answer 1

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();

更新代码

为此，您需要创建一个复选框模板，可用于在选择更改时填充设计。

$('#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

Answer 2

迈克尔，试试这个：

的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;
}

<强> Demo

通过禁用而不是隐藏不需要的复选框，我稍微偏离了这个简介。这可能不会让用户感到困惑。如果没有，那么修改隐藏/显示的代码非常容易：

$('#primary').on('change', function() {
    $('.secondary').find('label').show().eq(this.selectedIndex).hide();
}).trigger('change');

<强> Demo

HTML / Jquery隐藏+显示依赖关系

2 个答案: