HTML SELECT - Change selected option by VALUE using JavaScript

Question

There can be many options in a SELECT dropdown.

<select id="sel">
    <option value="car">1</option>
    <option value="bike">2</option>
    <option value="cycle">3</option>
    ...
</select>

I'm creating a Update Profile page where a user's profile is retrieved from the database and a form is shown with those values. When it comes to SELECTdropdown, there are many options. So, its tedious test all values

if (value == '1')
    echo "<option selected value='car'>1</option>";`

So, I want to have the corresponding option selected from its value. Like when I do something like sel.value = 'bike' using JavaScript the option 2 should be selected.

Are you sure `value="car"` and the text is `1`, and not the other way around? Is the ` — freefaller, Sep 04 '12 at 14:28
You want to select this with the serverside? Why no serverside tag? — epascarello, Sep 04 '12 at 14:30

score 128 · Accepted Answer · edited Jul 03 '18 at 19:40

128

You can select the value using javascript:

document.getElementById('sel').value = 'bike';

DEMO

edited Jul 03 '18 at 19:40

Dave Chen

10,762
8
38
67

answered Sep 04 '12 at 14:28

Michal Klouda

13,903
7
51
74

3

Remember: you may use sel.value = 'bike' instead of document.getElementById('sel').value – Eduardo Xavier Feb 09 '15 at 18:20
2

@EduardoXavier, if you first run 'var sel = document.getElementById('sel');', then yes, you can. Otherwise, no, you can't. If the element only has `id`, the only way is to get the element first. However, if it has the `name` attribute and it is inside a form, you can use `formelement.sel.value`. http://www.w3.org/TR/html5/forms.html#the-form-element and http://www.w3.org/TR/html5/forms.html#dom-form-nameditem – Denilson Sá Maia May 22 '15 at 18:46
3

@DenilsonSá This question is about the use of the "id". What you said about form and names is rigth but you're completly wrong when you say I can't access an element in the way I proposed. Let us do some practice then, have a look at here https://jsfiddle.net/tub6f0Lg/ :P cheers! – Eduardo Xavier Aug 04 '15 at 08:48
1

@EduardoXavier: I stand corrected, you are right! Thanks for pointing it out! :) http://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object However, although handy, relying on IDs being available as global variables because of window object may lead to messy and unreadable code. Consider another developer (maybe even yourself after a while) reading the code. – Denilson Sá Maia Aug 04 '15 at 23:52
http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery/ – May 25 '16 at 19:11

score 39 · Answer 2 · answered Sep 04 '12 at 14:29

39

If you are using jQuery:

$('#sel').val('bike');

answered Sep 04 '12 at 14:29

Trevor

6,601
5
34
67

Vijay · Answer 3 · 2013-10-15T05:24:36.213

12

try out this....

JSFIDDEL DEMO

using javascript

document.getElementById('sel').value = 'car';

using jQuery

$('#sel').val('car');

edited Oct 15 '13 at 05:24

answered Oct 12 '13 at 10:22

Vijay

7,651
9
41
69

score 1 · Answer 4 · edited Apr 29 '19 at 04:09

1

document.getElementById('drpSelectSourceLibrary').value = 'Seven';

edited Apr 29 '19 at 04:09

Makyen

29,855
12
76
115

answered May 25 '16 at 19:13

HTML SELECT - Change selected option by VALUE using JavaScript

4 Answers4

Linked

Related