CODEWITHSUNDEEP
javascriptjqueryhtmlselect
tier1
tier1

Reputation: 6433

Jquery populate multiple select boxes with the same name

I am dynamically creating elements with javascript that end up looking something like this:

<select id="splitUserDDL" name="splitUserDDL[]"></select>

When I attempt to add options, it seems that the first select box is being populated but not the rest. Is there a way that I can add the same options to all of the select boxes?

    $('#splitUserDDL').empty();
    var userDDL = document.getElementById('splitUserDDL');
    var defaultoption = document.createElement('option');
    defaultoption.text = '-Select-';
    defaultoption.value = 0;
    userDDL.add(defaultoption);

Upvotes: 1

Views: 1179

Answers (1)

Barmar
Barmar

Reputation: 780769

Use a class instead of ID.

<select class="splitUserDDL" name="splitUserDDL[]"></select>

Then use jQuery to add the option, and loop over all of them:

$(".splitUserDDL").empty();
$(".splitUserDDL").each(function() {
    $(this).append($("<option>", {
        text: "-Select-",
        value: 0
    });
});

Upvotes: 1

Related Questions