I have a page on a website that I am updating automatically from a web service. I am trying to set the value of a dropdown <select> before the page is loaded and I can see when I select the drop down the value I wanted is already highlighted however I want that option to be selected not highlight. This is my code in javascript:

document.getElementById('walkForAmount').selectedIndex = object.get("WalkForTime");

which is called automatically when the page is loaded. It sets the selectedIndex to an int 0 -15. And the HTML code:

  <select id = "walkForAmount" name="walkForAmount" style="margin-left:2em;margin-top:-1em; width:4em;">
                                <option>-</option>
  </select>

Edit: below id the JS I use to generate options

$(document).ready(function() { 

    $("#walkForAmount").select2({

    }); 

    $("#walkForType").select2({

    });

    for (i = 1; i < 16; i++) {

    $("#walkForAmount").append("<option>"+i+"</option>");

    }

});

I have a page on a website that I am updating automatically from a web service. I am trying to set the value of a dropdown <select> before the page is loaded and I can see when I select the drop down the value I wanted is already highlighted however I want that option to be selected not highlight. This is my code in javascript:

document.getElementById('walkForAmount').selectedIndex = object.get("WalkForTime");

which is called automatically when the page is loaded. It sets the selectedIndex to an int 0 -15. And the HTML code:

  <select id = "walkForAmount" name="walkForAmount" style="margin-left:2em;margin-top:-1em; width:4em;">
                                <option>-</option>
  </select>

Edit: below id the JS I use to generate options

$(document).ready(function() { 

    $("#walkForAmount").select2({

    }); 

    $("#walkForType").select2({

    });

    for (i = 1; i < 16; i++) {

    $("#walkForAmount").append("<option>"+i+"</option>");

    }

});

• javascript
• html
• drop-down-menu

• What do you mean by selected but not highlighted? – pimvdb Commented Jan 1, 2013 at 21:17
• when I open the drop down the value I want to fill it with is highlighted to tell me that is the selected index but when the page loads the select statement is empty, it just shows the "-" – Bradley Armstrong Commented Jan 1, 2013 at 21:22
• where is all the <option>? if you want to have it selected, you need to show us where you generate the options. – kennypu Commented Jan 1, 2013 at 21:25
• Apologies forgot to add it, even though I already said its filled with int 0-15... didn't really need a down vote. – Bradley Armstrong Commented Jan 1, 2013 at 21:31
• to make an option selected, you need to append selected to it: <option selected value='1'></option> so you need to check if the current option is one to select, and if so, append the selected option tag instead. – kennypu Commented Jan 1, 2013 at 21:33

1 Answer 1

If you're using Select2, you can update your selection via

$("#walkForAmount").select2("val", "5"); // select "5"

Example: http://jsfiddle/verashn/aWvQr/1/