Jquery populate multiple select boxes with the same name

Question

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

Do they all have the same id? If they do, that's invalid HTML and your exact problem. Also, why are you creating a 'label' option, rather than using an <optgroup> with a label attribute? — David Thomas
– David Thomas, Commented Jul 5, 2014 at 18:06
Elements need to have unique IDs. document.getElementById just returns the first match. — Barmar
– Barmar, Commented Jul 5, 2014 at 18:07

Barmar · Accepted Answer · 2014-07-05 18:12:03Z

1

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

answered Jul 5, 2014 at 18:12

Barmar

789k57 gold badges554 silver badges668 bronze badges

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

Collectives™ on Stack Overflow

Jquery populate multiple select boxes with the same name

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related