How to select and option from a select dropdown using JS

Question

For some reason I am having a hard time using the value of an option in a select dropdown. Here is the code:

<select id="select_category" name="select_category">
  <option value=""></option>
  <option value="home">Home</option>
  <option value="office">Office</option>
  <option value="dinning_room">Dinning Room</option>
</select>

<script>
var select_category = document.getElementById("select_category");
select_category.options["home"].selected = true;
</script>

When I run this I get the error "Cannot set propery 'selected' of undefined. If I replace ["home"] with [2] in the last line it works. Why can't I reference the option via the value I assigned to it?

Thanks

EDIT - as suggested, changed the javascript to this below, but now I get the error "token ILLEGAL"

document.getElementById('select_category').value = 'home';

document.getElementById('select_category').value = 'home';

DevlshOne
– DevlshOne

2013-07-26 17:36:54 +00:00
Commented Jul 26, 2013 at 17:36 — DevlshOne
– DevlshOne, Commented Jul 26, 2013 at 17:36

DevlshOne · Accepted Answer · 2013-07-26 17:37:30Z

3

document.getElementById('select_category').value = 'home';

jsFiddle Demo

answered Jul 26, 2013 at 17:37

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

quinnirill Over a year ago

This is actually a much better way to do it than what I suggested.

Danconia Over a year ago

But how do I then set the selected item to that one?

DevlshOne Over a year ago

@LuisP That's exactly what it does. Use the jsFiddle demo I posted to try the other options.

Danconia Over a year ago

@DevlshOne I cannot get it to work. Essentially this is for a dynamically created select statement for which I want to set the option which I receive via a variable. When I removed my two lines of JS and just added yours I got the error "Unexpected token Illegal"

DevlshOne Over a year ago

If it's for a dynamically created select statement, you're going to need to use jQuery so you can delegate events or add .addEventListeners in your JS. Are you trying to stick to pure JS?

|

Lebowski156 · Accepted Answer · 2013-07-26 20:01:44Z

2

select_category.options["home"].selected = true;

This line isn't working because options requires an index (ie the number, as you discovered above).

http://www.w3schools.com/jsref/coll_select_options.asp

Give each option a name and use this:

select_category.options.namedItem("nameGoesHere").selected = true;

Alternatively, you can give each option an id and use:

document.getElementById("home").selected = true;

(assuming the id of the option is "home" in this case.

edited Jul 26, 2013 at 20:01

answered Jul 26, 2013 at 17:37

Lebowski156

9515 gold badges12 silver badges36 bronze badges

5 Comments

Danconia Over a year ago

How can I then set a certain option as selected using the value (should I put an ID on each option?)

Lebowski156 Over a year ago

If you put an id on each option that would be fine. Value is just used to display text to the user. Since you can potentially have two options with the same value, it isn't useable as a unique identifier. With id's, if you have id="home", then you know exactly which one options["home"] is referring to since you can't have more than one option with id="home". That's why value isn't used as an identifier.

Danconia Over a year ago

Ok, tried doing that and now get the error "unexpected identifier". now each option is defined <option id="home_option" value="home">Home</option>.... and the JS is: var select_category = document.getElementById("select_category"); select_category.options["home_option"].selected = true;

Lebowski156 Over a year ago

You can actually just do document.getElementById("home_option").selected = true;

Lebowski156 Over a year ago

I lied to you. Sorry. I re-did my answer.

quinnirill · Accepted Answer · 2013-07-26 17:41:17Z

2

Because options is an array. You could write a function like this, though:

function selectOptionByValue (select, value) {
    for ( var i = 0; i < select.options.length; i++ ) {
        select.options[i].selected = select.options[i].value === value;
    }
}

answered Jul 26, 2013 at 17:41

quinnirill

8245 silver badges7 bronze badges

Comments

Niklas · Accepted Answer · 2013-07-26 17:47:12Z

1

Try this one:

document.getElementById("select_category").options[1].selected = true;

If you want to set it via the value use this:

document.getElementById('select_category').value = 'home';

edited Jul 26, 2013 at 17:47

answered Jul 26, 2013 at 17:37

Niklas

25.7k36 gold badges139 silver badges185 bronze badges

4 Comments

Danconia Over a year ago

Yes, but I need to do it via the values since this is coming from a variable

Danconia Over a year ago

I tried doing what you said but now I get a 'token illegal' error (see edit above).

Niklas Over a year ago

Do you want to set the value, before the element gets rendered?

Danconia Over a year ago

No, not necessary, I just want it to show the right option (which was the one selected in the prior page)

Collectives™ on Stack Overflow

How to select and option from a select dropdown using JS

4 Answers 4

7 Comments

5 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

5 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related