Updating Multiple Select Values via Javascript

Question

I am trying to use JS to update the selected value of multiple select elements, at the same time. For some reason, my JS only updates one select, not all of them on the page. Unfortunately, I am not able to change the id attribute of the select, and the various select elements need to have the same id.

How might I change the function so that ALL drop downs with id 'dropdown-test' are updated?

JS

document.getElementById('dropdown-test').value="3";

HTML

<select id="dropdown_test">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select id="dropdown_test">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

You must have unique IDs, not same id for different elements — Sergio, Sep 07 '13 at 09:45
"the various selects need to have the same `id`." - if this is true, you have a requirement that means you'll be doing HTML all wrong. The whole point of Id's is that they are unique within a page! — Chamila Chulatunga, Sep 07 '13 at 09:48
Also, your `getElementById()` call is passed a different ID than the one the DOM elements have. — Boaz, Sep 07 '13 at 09:48

score 3 · Answer 1 · edited May 23 '17 at 12:11

3

You must have unique IDs. If you want to use jQuery you can do like this:

$('select').val(3);

Demo here

If you want to use plain javascript you can use:

var all_select = document.getElementsByTagName("select");
for (i = 0; i < all_select.length; i++) {
    all_select[i].value = 3;
}

Demo here

If you need ids anyway, please give them different names.

Read about ID:

edited May 23 '17 at 12:11

Community

1
1

answered Sep 07 '13 at 09:48

Sergio

28,539
11
85
132

+1 Note though the OP specifically says the only constraint is that the `id` cannot be changed and must be the same for all elements, even though that is invalid. – Boaz Sep 07 '13 at 09:52

score 1 · Answer 2 · edited Sep 07 '13 at 09:54

1

try using class name.Id should be unique.

HTML

<select class="dropdown_test">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select class="dropdown_test">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

JS

document.getElementByClass('.dropdown-test').value="3";

edited Sep 07 '13 at 09:54

Boaz

19,892
8
62
70

answered Sep 07 '13 at 09:52

sudhansu63

6,025
4
39
52

Vaibs_Cool · Accepted Answer · 2013-09-07T10:29:04.840

0

$('#strings option[value=Test]').attr('selected', true);

Demo Jsfiddle with similar ids

edited Sep 07 '13 at 10:29

answered Sep 07 '13 at 10:06

Vaibs_Cool

6,126
5
28
61

Updating Multiple Select Values via Javascript

3 Answers3