How to change the selected option of a select by using JavaScript?

Ask Time：2013-02-15T01:13:22 Author：DaveLeGO

I've got a very simple problem but I can't figure out how to do this ... In my HTML page, I have a simple select tag :

<select id="selection-type">
     <option disabled="disabled">Type</option>
     <option value="0">Tous les types</option>
     <option value="1">Appartement</option> 
     <option value="2">Maison</option>
     <option value="3">Terrain</option>
</select>

I want to set a specific value dynamically using JavaScript, but I just managed to change the selected index, and not the displayed value. Currently, I'm doing this (in the footer section of my HTML page) :

<script type="text/javascript">
  $(document).ready(function(){
    document.getElementById("selection-type").selectedIndex = 2;
});
</script>

And in the result, it's change the selected index of my select, but the displayed text is not "update" : the value "Tous les types" stays. In fact, I want to change the whole selection, e.g. the selected option and not just the index.

Author:DaveLeGO，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/14880319/how-to-change-the-selected-option-of-a-select-by-using-javascript

matts :

It looks like you're using jQuery. You could use jQuery's val method to change the select box, using the value of the option you want to select:\n\n$(document).ready(function() {\n $('#selection-type').val('1');\n});\n\n\nOr do you need it to be done in plain JavaScript?\n\nEdit:\n\nWhat browser are you using? The selectedIndex thing you're doing actually does work for me in Chrome 24.0.1312.5.",

2013-02-14T17:19:19

Toping :

Have you tried:\n\ndocument.getElementById(\"selection-type\").value = document.getElementById(\"selection-type\").selectedIndex.value;\n",

2013-02-14T17:43:48

How to change the selected option of a select by using JavaScript?