0

所以我有一个下拉列表和几个复选框。下拉列表与用户只能选择一个选项的主要选择有关。复选框属于次要选择，用户可以选择任意数量的选项，但他们从下拉列表中选择的选项不会显示为选项之一。到目前为止，这是我的代码：小提琴

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

4

2 回答 2

1

检查此演示

你不需要插件。简单的 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();​

更新的小提琴

于 2012-09-28T20:23:19.687 回答
1

迈克尔，试试这个：

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

演示

于 2012-09-28T20:53:04.920 回答