Jquery删除第二个框上的选定文本答案

【问题标题】：Jquery remove selected text on second boxJquery删除第二个框上的选定文本
【发布时间】：2013-03-28 04:09:04
【问题描述】：

我用erichynds's jquery MultiSelect Plugin改成2级链式选择框，但是效果很好，但是到目前为止还有一个小缺陷需要修复。

请寻找工作示例here。

例如，我在第一个框中选择了选项“2”，第二个框也将填充 optgroup 为“2”，然后我选择了“2B”，文本在第二个框中。好的，现在我在第一个框中取消选择“2”，“2”的 optgroup 消失了，但文本仍然显示在第二个框中，当我取消选择第一个框上的相关选项时，如何与文本一起删除？

function filterActivityTrigger(e){
     var ids = $('#filterActivity + div input:checked').map(function(i) {
        return $(this).val().replace(/ .*/, '');
     }).get(); // Retrieve checked IDs

     $('#filterSubActivity + div div label').each(function() { // Show matching options
        $(this).toggle($.inArray($('input', this).val().replace(/(\d+).*/, '$1'), ids) > -1);
     });

     $('#filterSubActivity + div label.optGroup').each(function() { // Show matching groups
        $(this).toggle($(this).next().find('label:visible').length > 0);
     });
}

请指教，谢谢。

【问题讨论】：

标签： jquery multi-select optgroup

【解决方案1】：

您可以在第一个框中检查选中元素的长度，然后进行相应的操作。请参考以下脚本：

function filterActivityTriggeredUser(e){
   var ids = $('#filterActivity + div input:checked').map(function(i) {
        return $(this).val().replace(/ .*/, '');
    }).get(); // Retrieve checked IDs
    var len = ids.length;

    $('#filterSubActivity + div div label').each(function() { // Show matching options
        $(this).toggle($.inArray($('input', this).val().replace(/(\d+).*/, '$1'), ids) > -1);
      if(len == 0)
            $('#filterSubActivity span').text('All');
             $(this).removeAttr('checked');
    });

    $('#filterSubActivity + div label.optGroup').each(function() { // Show matching groups
        $(this).toggle($(this).next().find('label:visible').length > 0);
    });
}

function filterSubActivityTriggeredUser(e){ 
    if($(e).attr('checked')=='checked') {

    }
}

$(document).ready(function() {

    $("#filterActivity").multiSelect({
        selectAll: false,
        noneSelected: 'All',
        oneOrMoreSelected: '*'
    },
    filterActivityTriggeredUser);

    $("#filterSubActivity").multiSelect({
        selectAll: false,
        noneSelected: 'All',
        noneSelectedText : 'All',
        oneOrMoreSelected: '*'
    },
    filterSubActivityTriggeredUser);

});

这是工作示例：http://jsfiddle.net/G2kXg/1/

【讨论】：

谢谢，您的示例适用于选择了 1 个选项，如果选择了超过 1 个选项，它仍然是文本。

【解决方案2】：

试试我的版本

function filterActivityTriggeredUser(e){
    var ids = $('#filterActivity + div input:checked').map(function(i) {
        return $(this).val().replace(/ .*/, '');
    }).get(); // Retrieve checked IDs
    $('#filterSubActivity + div div label').each(function() { // Show matching options
        $(this).toggle($.inArray($('input', this).val().replace(/(\d+).*/, '$1'), ids) > -1);
    });
    $('#filterSubActivity + div label.optGroup').each(function() { // Show matching groups
        $(this).toggle($(this).next().find('label:visible').length > 0);
    });

    var ids1 = [];
        $('#filterSubActivity + div div label:visible').each(function(i) {
             if($(this).find('input:checked').length>0)
                ids1.push($(this).text());
    });


    $('#filterSubActivity span').text(ids1.join(" ,"));  
    if(ids1.length==0)
        $('#filterSubActivity span').text('All');


}

每次更改 filterActivity 时我都会设置“filterSubActivity”

这是工作示例http://jsfiddle.net/hsQjh/17/

希望对你有帮助。

【讨论】：