Selecting items in a multi-select listbox using jquery
<p>What i am trying to do is as below:
I have a list box of rights. The grouping of the rights is base on right name + action, eg. "Ticket-Add". What i am planning to do is that if i select "Ticket-Add", "Ticket-View" should be selected too.</p>

<p>Problem:
When another right name is selected, it does not work the same way anymore. The variable string will return a concated list of selected text, eg. "Ticket-AddTicket-Edit", and it will no longer work with split function.</p>

<p>Initial Code:</p>

<pre><code>$('#lbRights').change(function () {
    var string = jQuery('#lbRights option:selected').text();
    var substring = string.split('-');

    if ($.trim(substring[1]) == "Edit") {
        var selectView = substring[0] + '-View';
        var selectViewOwn = substring[0] + '-ViewOwn';
        var selectViewAll = substring[0] + '-ViewAll';

        jQuery('#lbRights option[text="' + selectView + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewAll + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewOwn + '"]').attr('selected', 'selected');
    }
    else if ($.trim(substring[1]) == "Add") {
        var selectView = substring[0] + '-View';
        var selectViewOwn = substring[0] + '-ViewOwn';
        var selectViewAll = substring[0] + '-ViewAll';

        jQuery('#lbRights option[text="' + selectView + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewAll + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewOwn + '"]').attr('selected', 'selected');
    }
    else if ($.trim(substring[1]) == "EditOwn") {
        var selectView = substring[0] + '-View';
        var selectViewOwn = substring[0] + '-ViewOwn';

        jQuery('#lbRights option[text="' + selectView + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewOwn + '"]').attr('selected', 'selected');
    }
    else if ($.trim(substring[1]) == "EditAll") {
        var selectView = substring[0] + '-View';
        var selectEditOwn = substring[0] + '-EditOwn';
        var selectViewOwn = substring[0] + '-ViewOwn';
        var selectViewAll = substring[0] + '-ViewAll';

        jQuery('#lbRights option[text="' + selectView + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewAll + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewOwn + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectEditOwn + '"]').attr('selected', 'selected');
    }
    else if ($.trim(substring[1]) == "ViewAll") {
        var selectView = substring[0] + '-View';
        var selectViewOwn = substring[0] + '-ViewOwn';

        jQuery('#lbRights option[text="' + selectViewAll + '"]').attr('selected', 'selected');
        jQuery('#lbRights option[text="' + selectViewOwn + '"]').attr('selected', 'selected');
    }
})
</code></pre>

<p>What I am trying:
I tried to use .each to loop through an array which i used to store the text() but the automatically selecting of listbox items did not occur. Can someone point out where went wrong? Thanks.</p>

<p>Edited Code:</p>

<pre><code>$('#lbRights').change(function () {
    var realvalues = [];
    var textvalues = [];
    $('#lbRights option:selected').each(function (i, selected) {
        realvalues[i] = $(selected).val();
        textvalues[i] = $(selected).text();

        var string = textvalues[i].toString();
        var substring = string.split('-');

        if ($.trim(substring[1]) == "Edit") {
            var selectView = substring[0] + '-View';
            var selectViewOwn = substring[0] + '-ViewOwn';
            var selectViewAll = substring[0] + '-ViewAll';

            jQuery("#lbRights option[text='" + selectView + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewAll + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewOwn + "']").attr('selected', true);
        }
        else if ($.trim(substring[1]) == "Add") {
            var selectView = substring[0] + '-View';
            var selectViewOwn = substring[0] + '-ViewOwn';
            var selectViewAll = substring[0] + '-ViewAll';

            jQuery("#lbRights option[text='" + selectView + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewAll + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewOwn + "']").attr('selected', true);
        }
        else if ($.trim(substring[1]) == "EditOwn") {
            var selectView = substring[0] + '-View';
            var selectViewOwn = substring[0] + '-ViewOwn';

            jQuery("#lbRights option[text='" + selectView + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewOwn + "']").attr('selected', true);
        }
        else if ($.trim(substring[1]) == "EditAll") {
            var selectView = substring[0] + '-View';
            var selectEditOwn = substring[0] + '-EditOwn';
            var selectViewOwn = substring[0] + '-ViewOwn';
            var selectViewAll = substring[0] + '-ViewAll';

            jQuery("#lbRights option[text='" + selectView + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewAll + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewOwn + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectEditOwn + "']").attr('selected', true);
        }
        else if ($.trim(substring[1]) == "ViewAll") {
            var selectView = substring[0] + '-View';
            var selectViewOwn = substring[0] + '-ViewOwn';

            jQuery("#lbRights option[text='" + selectViewAll + "']").attr('selected', true);
            jQuery("#lbRights option[text='" + selectViewOwn + "']").attr('selected', true);
        }
    })
})
</code></pre>
