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
– Sergio, Commented Sep 7, 2013 at 9: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
– Chamila Chulatunga, Commented Sep 7, 2013 at 9:48
Also, your getElementById() call is passed a different ID than the one the DOM elements have. — Boaz
– Boaz, Commented Sep 7, 2013 at 9:48
Try jQuery, put a class of dropdown_test to the <select>s and use $(".dropdown_test").val(3) — PurkkaKoodari
– PurkkaKoodari, Commented Sep 7, 2013 at 9:49

Community · Accepted Answer · 2017-05-23 12:11:08Z

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, 2017 at 12:11

CommunityBot

11 silver badge

answered Sep 7, 2013 at 9:48

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

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

1 Comment

Boaz Over a year ago

+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 · Accepted Answer · 2013-09-07 09:54:49Z

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 7, 2013 at 9:54

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

answered Sep 7, 2013 at 9:52

sudhansu63

6,2204 gold badges41 silver badges55 bronze badges

Comments

Vaibs_Cool · Accepted Answer · 2013-09-07 10:29:04Z

0

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

Demo Jsfiddle with similar ids

edited Sep 7, 2013 at 10:29

answered Sep 7, 2013 at 10:06

Vaibs_Cool

6,1506 gold badges30 silver badges61 bronze badges

Collectives™ on Stack Overflow

Updating Multiple Select Values via Javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related