Question

I have a multi-select list-box with 100+ <option>

Now I have 7 or 8 values that needs to be selected.

My code is:

            var selObj = document.getElementById('list1');
            var len = selObj.length;
            var selected_values = '1#2#15#34#82#96';
            var selected_values_array = selected_values.split('#');
            var alen = selected_values_array.length;

            for (i = 0; i < len; i++) {
                for (j = 0; j < alen; j++) {
                    if (selObj[i].value == selected_values_array[j]) {
                        selObj[i].selected = true;
                        break;
                    }
                }
            }

When script is encountered, browser stops responding. I know my code is bad, but is their any way to improve it. Either using jQuery or javascript?

Thanks

Answer 1

How about this with a little help of jQuery (got it working now):

var selected_values = '1#2#15#34#82#96';
var selectors = '#list1 > option[value="' + selected_values.split('#').join('"], #list1 > option[value="') + '"]';
$( selectors ).each( function() {
    $( this ).attr( 'selected', true );
} );

A bit uglier than I’d hoped. But hey. 🙂

See it in action here. And here is an edited version with a larger sized select box.