Generate select options from array and select multiple element by comparing with another array (jQuery)

Question

What I want to do is to generate option elements for a multiple select drop-down from a JavaScript array. Than select each option in the drop-down that is the same as the value in another array (The results array in the example).

The problem is that when the results array has multiple elements, the original options get multiplied in the HTML for the number of elements in the results array.

I understand why this is happening, but I cant seem to find a better solution then the one I currently use, which is something like this:

var
options = ['Some value', 'Another value', 'Third value', 'Something completely different'],
results = ['Some value', 'Another value'],
selectHtml;

$.each( options, function( index, value ) {
    var option = value;

    $.each( results, function( index, value ) {
        if ( option === value ) {
            selectHtml += '<option selected="selected" value="' + option + '">' + option + '</option>';
        }
        else {
            selectHtml += '<option value="' + option + '">' + option + '</option>';
        }
    });
});

You can find a live example here: http://jsfiddle.net/wCWyp/

What I want to accomplish is the same thing, but without the multiplication of the elements.

tb11 · Accepted Answer · 2012-07-09 08:02:11Z

2

Do an array search.

var 
options = ['Some value', 'Another value', 'Third value', 'Something completely different'],
results = ['Some value', 'Another value'],
selectHtml;

$.each( options, function( index, value ) {
    var option = value;
    if (results.indexOf(option) == -1){
        selectHtml += '<option value="' + option + '">' + option + '</option>';
    } else {
        selectHtml += '<option selected="selected" value="' + option + '">' + option + '</option>';
    }
});

$('#test').html( selectHtml );

answered Jul 9, 2012 at 8:02

tb11

3,11623 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mplungjan · Accepted Answer · 2012-07-09 08:20:08Z

2

How about generating the select, and then do

 $("#selectId").val(results);

http://jsfiddle.net/mplungjan/kgJeQ/

var options = ['Some value', 
'Another value', 'Third value', 
'Something completely different'],
results = ['Some value', 'Another value'];

$("#selId").empty();
$.each( options, function( index, value ) {
    var text = value;
     $("#selId").append('<option value="' + value + '">' + text + '</option>');
});
$("#selId").val(results);

edited Jul 9, 2012 at 8:20

answered Jul 9, 2012 at 8:05

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

Maverick Over a year ago

Yeah, but there are other circumstances forcing me to implement the loop solution.

mplungjan Over a year ago

Hmm then I severely wasted my time here.

James Allardice · Accepted Answer · 2012-07-09 08:00:26Z

1

The problem is that you are iterating over the results array for every element of the options array. You can just use the indexOf method to determine if the current option is in the results array:

$.each( options, function( index, value ) {
    selectHtml += '<option ' + (results.indexOf(value) > -1 ? 'selected' : '') + ' value="' + value + '">' + value + '</option>';
});

Here's an updated fiddle.

However, bear in mind that Array.prototype.indexOf is not available in older browsers, so you will probably want to include a polyfill. MDN provides one in the link above.

answered Jul 9, 2012 at 8:00

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Collectives™ on Stack Overflow

Generate select options from array and select multiple element by comparing with another array (jQuery)

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related