how to pre-select an option in a dropdown in javascript?

Question

i have this code for a dropdown

if (chosen == "Parade") {
  selbox.options[selbox.options.length] = new Option("Select Venue","");
  selbox.options[selbox.options.length] = new Option("Benavides Park","Benavides Park");
  selbox.options[selbox.options.length] = new Option("CME Auditorium","CME Auditorium");
  selbox.options[selbox.options.length] = new Option("Engineering Sports Complex","Engineering Sports Complex");
  selbox.options[selbox.options.length] = new Option("Field in front of Grandstand","Field in front of Grandstand");
  selbox.options[selbox.options.length] = new Option("Plaza Mayor","Plaza Mayor");
  selbox.options[selbox.options.length] = new Option("Quadricentennial Park","Quadricentennial Park");
  selbox.options[selbox.options.length] = new Option("Rectors Hall","Rectors Hall");
  selbox.options[selbox.options.length] = new Option("Seminary Gym","Seminary Gym");
  selbox.options[selbox.options.length] = new Option("Tinoco Park","Tinoco Park");
  selbox.options[selbox.options.length] = new Option("UST Grandstand","UST Grandstand");
  selbox.options[selbox.options.length] = new Option("UST Gymnasium","UST Gymnasium");
  selbox.options[selbox.options.length] = new Option("Venue not listed/outside UST","Venue not listed/outside UST");
}

what is the code for the option "Benavides Park" to be the default value? in html it's like this

selected="selected"

how about in javascript?

check out this question http://stackoverflow.com/questions/149573/check-if-option-is-selected-with-jquery-if-not-select-a-default — eKek0, Oct 12 '09 at 22:13

score 5 · Accepted Answer · answered Oct 12 '09 at 22:12

5

you need to use

new Option("UST Grandstand","UST Grandstand", 1);

keep the eye on the 1 at the right. thats means selected

answered Oct 12 '09 at 22:12

Gabriel Sosa

7,897
4
38
48

that value need to be different of false, just that – Gabriel Sosa Oct 12 '09 at 22:14
thanks for your answer. but if I want to validate if the selected value is for example `select your value` which is the standard value and it is like this: `selbox.options[selbox.options.length] = new Option('Select your value', '', 1);` like you said. How would I accomplish that. right now I have this. `if(sel == null || sel == "") { alert("The dropdown list can't be empty."); return false; }` but it still accepts the form submit. while still giving the alert. – BRoebie Nov 16 '15 at 12:27

score 1 · Answer 2 · answered Oct 13 '09 at 00:00

May I suggest that you make your code cleaner, like so:

var selectedItem = -1; // change to select different item
var options = ["Benavides Park", "CME Auditorium", "Engineering Sports Complex", "Field in front of Grandstand", "Plaza Mayor", "Quadricentennial Park", "Rectors Hall", "Seminary Gym", "Tinoco Park", "UST Grandstand", "UST Gymnasium", "Venue not listed/outside UST"];

selbox.add( new Option("Select Venue", "", (-1 == selectedItem) ? 1 : 0));
for (var i = 0; i < options.length; i++) {
   selbox.add( new Option(options[i], options[i], (i == selectedItem) ? 1 : 0) );
}

To me this just feels nicer because whenever you want to change a value then you just change its value in the array. And this can also be refactored into a function on it's own that merely accepts an array and the select box to load items into.

(Tested in chrome but should work in most places; there is a hack that you can find on w3schools to fix it for IE6. Also, if the select box has items in it then they will remain. You might want to clear it first with code from here: http://www.plus2net.com/javascript_tutorial/list-remove.php)

score 0 · Answer 3 · answered Oct 12 '09 at 22:14

0

try this:

var foo = document.getElementById('yourSelect');
if (foo)
{
  foo.selectedIndex = 0;
}

answered Oct 12 '09 at 22:14

eKek0

23,005
25
91
119

how to pre-select an option in a dropdown in javascript?

3 Answers3