ansaurus

Question

dynamically select multiple options in a select box

Answer 1

A:

I'm not very familiar with Javascript, but i think it's this:

var values = [1, 2, 4];
var sel = document.getElementsByTagName('SELECT')[0];
for (var i = 0; i < sel.options.length; i++) {
    if(sel.options[i].value == 1 || sel.options[i].value == 2 || sel.options[i].value == 4)
        sel.options[i].selected = 'selected';
}

Gabriel Guimarães 2010-04-26 17:44:34

Answer 2

+3 A:

In plain JavaScript:

function in_array(needle, haystack, argStrict)
{
    var key = '', strict = !!argStrict;
    if (strict)
    {
        for (key in haystack)
        {
            if (haystack[key] === needle)
                return true;
        }
    }
    else
    {
        for (key in haystack)
        {
            if (haystack[key] == needle)
                return true;
        }
    }
    return false;
}

var values = new Array(1, 2, 4);
var select = document.getElementById('selectName'); //Change to the id of the select
if (select)
{
    for (var i = 0; i < select.options.length; i++) 
    {
        //Select options matching array values, unselect others
        select.options[i].selected = in_array(select.options[i].value, values, false);
    }
}

UPDATE: Added JavaScript function in_array that mimic the PHP one...

AlexV 2010-04-26 17:45:42

for each value on the array you will loop through the entire collection of items in the select? aren't you overdoing it?

Gabriel Guimarães 2010-04-26 17:51:36

Yes it's a bit overkill, but since many elements in the select can have the same value... It's unlikely, but it's possible :) Anyway with this snippet I guess you get the idea how to do it.

AlexV 2010-04-26 17:57:39

I don't think that the developer should allow a select with the same value as other, that would be maintainability hell.

Gabriel Guimarães 2010-04-26 18:02:58

In some case yes, in some other no. For example, a country list. You have all the country of the world sorted alphabetically. At the top of the list you often have duplicates representing the most used choices like USA, Canada...

AlexV 2010-04-26 18:05:47

Sorry if you have duplicate items on the select, I don't understand why would you sort them alphabetically.

Gabriel Guimarães 2010-04-26 18:28:27

Have you never saw a list of all the countries of the world? They are hundreds of them, all sorted alphabetically. But often at the beggining of the list you will have the most frequent choices for your region followed by a separator. Something like USA, Canada, [separator], Afghanistan, South Africa, ... Cambodia, Cameroon, Canada...

AlexV 2010-04-26 18:59:35

Answer 3

+1 A:

Since I do not yet have 50 rep points I cannot comment or fix the post above

So here is my fix to the above array

var values = new Array(1, 2, 4); // using commas
var values = [1, 2, 4]; // using array notation

mplungjan 2010-04-26 17:50:22

- ah, he fixed it himself...

mplungjan 2010-04-26 17:52:10

However Harmen is wrong.You cannot select an option on its index using its value like you posted

mplungjan 2010-04-26 17:53:20

Answer 4

+5 A:

jQuery has a utility called $.inArray(value,array). You could do something like this:

var array = [1,2,4];

$('#example option').each(function() {
    var $th = $(this);
    var value = parseInt($th.val());
    if( $.inArray(value,array) >= 0 ) {
        $th.attr('selected','selected');
    }
});

$.inArray() returns the index of the value if it is found, or -1 if it is not in the array. That's why you need to test for >= 0.

View example here-

http://jsfiddle.net/PJs37/

patrick dw 2010-04-26 18:07:29

ansaurus

tags:

views:

answers:

dynamically select multiple options in a select box

related questions