I have this multi select list:

<select id="vendors" name="vendors" multiple="multiple">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

When the page loads, I'm loading a list of ids that need to be selected in my select list. Here's how I'm trying to do it:

var vendors = GetVendorArray();  // list of vendor ids I want selected

$.each(vendors, function(index, item) {
    $("#vendors").filter(function() {
        return $(this).val() == item; 
    }).attr('selected', true);
});

But this doesn't work, none of the items are being selected. Anyone know what I'm doing wrong?

I have this multi select list:

<select id="vendors" name="vendors" multiple="multiple">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

When the page loads, I'm loading a list of ids that need to be selected in my select list. Here's how I'm trying to do it:

var vendors = GetVendorArray();  // list of vendor ids I want selected

$.each(vendors, function(index, item) {
    $("#vendors").filter(function() {
        return $(this).val() == item; 
    }).attr('selected', true);
});

But this doesn't work, none of the items are being selected. Anyone know what I'm doing wrong?

• javascript
• jquery
• html

• Show us the contents of the vendors object – nbrooks Commented Mar 4, 2013 at 2:06
• @nbrooks - the array has data. It's pulling in a list of ids from the query string. I have an alert when I loop through each value in the array that displays the item – Steven Commented Mar 4, 2013 at 2:08
• You say 'list of ids' but that means nothing to me...none of your options has an id-attribute. I ask because there might be some issue with blank space characters in the string, you might be trying to match against value when you're really trying to match against text, I don't know...without seeing that we can't tell if that may be a part of the error. – nbrooks Commented Mar 4, 2013 at 2:11

2 Answers 2

Simplest approach is just pass the whole array as value to the select using val(). With mulitple select value is an array

$('#vendors').val(  GetVendorArray())

DEMO:http://jsfiddle/sPKAY/

The problem with approach you took was not looping over option tags

filter reduces the set of matched elements to match the additional selector/callback fn. output. You need to target the <option> elements, not the drop-down list itself, since you're trying to select the option based on whether its value matches your array contents.

var vendors = GetVendorArray();  // list of vendor ids I want selected

$.each(vendors, function(index, item) {

    //you're filtering options, not the list itself
    $("#vendors > option").filter( function() {
        return $(this).val() == item; 
    }).prop('selected', true); //use .prop, not .attr
});