90

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.

2
  • 3
    Are you sure value="car" and the text is 1, and not the other way around? Is the <select> code static, or dynamically created from something like a database?
    – freefaller
    Sep 4, 2012 at 14:28
  • You want to select this with the serverside? Why no serverside tag? Sep 4, 2012 at 14:30

4 Answers 4

137

You can select the value using javascript:

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

DEMO

5
  • 6
    Remember: you may use sel.value = 'bike' instead of document.getElementById('sel').value Feb 9, 2015 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. w3.org/TR/html5/forms.html#the-form-element and w3.org/TR/html5/forms.html#dom-form-nameditem May 22, 2015 at 18:46
  • 4
    @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 jsfiddle.net/tub6f0Lg :P cheers! Aug 4, 2015 at 8:48
  • 1
    @EduardoXavier: I stand corrected, you are right! Thanks for pointing it out! :) 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. Aug 4, 2015 at 23:52
  • javascriptstutorial.com/blog/…
    – user5846985
    May 25, 2016 at 19:11
39

If you are using jQuery:

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

try out this....

JSFIDDEL DEMO

using javascript

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

using jQuery

$('#sel').val('car');
0
document.getElementById('drpSelectSourceLibrary').value = 'Seven';
1
  • Answer needs supporting information Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – moken
    Jul 21 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.