Im not sure why this isnt working and would love some help with it! And yes i have looked at this

Im trying to set multiple options in a select element as selected using an array holding the values i want selected and interating through both the array and the options in the select element. Please find code below:

// value is the array.
for (var j = 0; j < value.length; j++) {
    for (var i = 0; i < el.length; i++) {
        if (el[i].text == value[j]) {
            el[i].selected = true;
            alert("option should be selected");
        }
    }
}

After pleting these loops nothing is selected, even though the alert() fires.

Any ideas are wele!

Thanks

CM

PS (not sure whats happened to the code formatting).

EDIT: Full function

    if (CheckVariableIsArray(value) == true) {
        if (value.length > 1) { // Multiple selections are made, not just a sinle one.
            var checkBoxEl = document.getElementById(cbxElement);
            checkBoxEl.checked = "checked";
            checkBoxEl.onchange(); // Call function to change element to a multi select
            document.getElementById(element).onchange(); // Repopulates elements with a new option list.
            for (var j = 0; j < value.length; j++) {
                for (var i = 0; i < el.length; i++) {
                    if (el[i].text === value[j]) {
                        el[i].selected = true;
                        i = el.length + 1;
                    }
                }
            }
            //document.getElementById(element).onchange();
        }
    }
    else {
        for (var i = 0; i < el.length; i++) {
            if (el[i].innerHTML == value) {
                el.selectedIndex = i;
                document.getElementById(element).onchange();
            }
        }
    }

Im not sure why this isnt working and would love some help with it! And yes i have looked at this

Im trying to set multiple options in a select element as selected using an array holding the values i want selected and interating through both the array and the options in the select element. Please find code below:

// value is the array.
for (var j = 0; j < value.length; j++) {
    for (var i = 0; i < el.length; i++) {
        if (el[i].text == value[j]) {
            el[i].selected = true;
            alert("option should be selected");
        }
    }
}

After pleting these loops nothing is selected, even though the alert() fires.

Any ideas are wele!

Thanks

CM

PS (not sure whats happened to the code formatting).

EDIT: Full function

    if (CheckVariableIsArray(value) == true) {
        if (value.length > 1) { // Multiple selections are made, not just a sinle one.
            var checkBoxEl = document.getElementById(cbxElement);
            checkBoxEl.checked = "checked";
            checkBoxEl.onchange(); // Call function to change element to a multi select
            document.getElementById(element).onchange(); // Repopulates elements with a new option list.
            for (var j = 0; j < value.length; j++) {
                for (var i = 0; i < el.length; i++) {
                    if (el[i].text === value[j]) {
                        el[i].selected = true;
                        i = el.length + 1;
                    }
                }
            }
            //document.getElementById(element).onchange();
        }
    }
    else {
        for (var i = 0; i < el.length; i++) {
            if (el[i].innerHTML == value) {
                el.selectedIndex = i;
                document.getElementById(element).onchange();
            }
        }
    }

• javascript
• multi-select

3 Answers 3

Works for me. Are you setting el and value correctly? And are you sure you want to look at each option's innerHTML instead of it's value attribute?

See the jsFiddle.

HTML:

<select id="pick_me" multiple="multiple">
    <option>Hello</option>
    <option>Hello</option>
    <option>Foo</option>
    <option>Bar</option>
</select>

JS:

var value = ['Foo', 'Bar'],
    el = document.getElementById("pick_me");

// value is the array.
for (var j = 0; j < value.length; j++) {
    for (var i = 0; i < el.length; i++) {
        if (el[i].innerHTML == value[j]) {
            el[i].selected = true;
            //alert("option should be selected");
        }
    }
}

Well, first of all, you must set the html select control multiple property, something like this "<select multiple="multiple">...</select>", and then you can use the javascript function SetMultiSelect (defined as below) to set the select html control:

function SetMultiSelect(multiSltCtrl, values)
{
    //here, the 1th param multiSltCtrl is a html select control or its jquery object, and the 2th param values is an array
    var $sltObj = $(multiSltCtrl) || multiSltCtrl;
    var opts = $sltObj[0].options; //
    for (var i = 0; i < opts.length; i++)
    {
        opts[i].selected = false;//don't miss this sentence
        for (var j = 0; j < values.length; j++)
        {
            if (opts[i].value == values[j])
            {
                opts[i].selected = true;
                break;
            }
        }
    }
    $sltObj.multiselect("refresh");//don't forget to refresh!
}

$(document).ready(function(){
    SetMultiSelect($sltCourse,[0,1,2,3]);
});

Ran into this question and wasn't satisfied with the answers. Here's a generic, non-jQuery version. It utilises Array.indexOf where possible, but falls back to a foreach loop if it isn't available.

Pass a node into the function, alongside an array of values. Will throw an exception if an invalid element is passed into it. This uses === to check against the value. For the most part, make sure you're paring the option's value to an array of strings.

E.g. selectValues( document.getElementById( 'my_select_field' ), [ '1', '2', '3'] );

var selectValues = (function() {

    var inArray = ( function() {

        var returnFn;

        if( typeof Array.prototype.indexOf === "function" ) {

            returnFn = function(option, values) {

                return values.indexOf( option.value ) !== -1;

            };

        } else {

            returnFn = function(option, values) {

                var i;

                for( i = 0; i < values.length; i += 1 ) {

                    if( values[ i ] === option.value ) {

                        return true;

                    }

                }

                return false;

            }

        }

        return returnFn;

    }() );

    return function selectValues(elem, values) {

        var 
            i,
            option;

        if( typeof elem !== "object" || typeof elem.nodeType === "undefined" )
            throw 'selectValues() expects a DOM Node as it\'s first parameter, ' + ( typeof elem ) + ' given.';

        if( typeof elem.options === "undefined" ) 
            throw 'selectValues() expects a <select> node with options as it\'s first parameter.';

        for( i = 0; i < elem.options.length; i += 1 ) {

            option = elem.options[ i ];

            option.selected = inArray( option, values );

        }

    }

}());