CODEWITHSUNDEEP
javascriptjqueryarraysloops
Maverick
Maverick

Reputation: 2016

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

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.

Upvotes: 1

Views: 3935

Answers (3)

mplungjan
mplungjan

Reputation: 177786

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);

Upvotes: 2

tb11
tb11

Reputation: 3106

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 );

Upvotes: 2

James Allardice
James Allardice

Reputation: 165961

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.

Upvotes: 1

Related Questions