Jquery remove selected text on second box

0
votes

I use erichynds's jquery MultiSelect Plugin to changed to 2-level chained-select-box, however it works perfectly, but there is a little flaw that have to fix so far.

Please look for working example here.

For instance, I picked option '2' on first box, second box would populated optgroup for '2' as well, then I picked '2B' and the text is in second box. OK now I deselect '2' on first box, the optgroup for '2' is gone, BUT the text is still show in second box, how can I remove together with the text when I deselect the relevant option on first box? 

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

Please advise, thanks.

2
jquerymulti-selectoptgroup

2 Answers

0
votes

You can check the length of checked elements in first box, and then do accordingly. Please refer following script :

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

});

Here is the working example : http://jsfiddle.net/G2kXg/1/

0
votes

Try my version

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


}

I am setting "filterSubActivity" every time when filterActivity is changed

Here is working example http://jsfiddle.net/hsQjh/17/

I hope that helps.