Setting the selected value of a drop down using a javascript variable

Question

I am using JQuery to create dynamic dropdown boxes (the selection of the first drop down filters options in the second). I am trying to create a check for a reverse use case (selection of second drop down forces associated selection in the first).

I have previously used this code to successfully set the active value:

$("#department option[value='Other']").prop('selected', true);

Now, I am trying to do the same as above, but by using a variable value instead of a hardcoded one. This is the code I have so far:

var selected_campus = $("#college")[0].options[$("#college")[0].selectedIndex].text.split(":",1).toString();
$("#campus option[value=selected_campus]").prop('selected', true);

The first line works fine and the desired value is successfully stored in selected_campus. However, the second line does not. How can I set the selected value of #campus to selected_campus?

Note that split returns an array, and you coerce that array to a string. The only reason it works is because you added a limit so you always get a single item in the array, and stringifying that array returns the expected result, hopefully. I would think something like split(':').shift() would be a better option? And using some data attributes to identify the options would be even better. — adeneo
– adeneo, Commented Feb 14, 2017 at 17:34
@adeneo Thanks for the feedback. I'm still quite new so I wasn't aware of shift() and it appears to do exactly what I need! — Carrie Brown
– Carrie Brown, Commented Feb 14, 2017 at 17:36
That entire line looks iffy, there's probably better ways all together to bind the options together in some sort of system — adeneo
– adeneo, Commented Feb 14, 2017 at 17:37

Zakaria Acharki · Accepted Answer · 2017-02-14 17:33:15Z

3

You were close; you have just to concatenate the variable selected_campus with the selector (string) using the + and single quotes ' sign, like :

$("#campus option[value='"+selected_campus+"']").prop('selected', true);
________________________^_^_______________^_^

Instead of :

$("#campus option[value=selected_campus]").prop('selected', true);

Hope this helps.

edited Feb 14, 2017 at 17:33

answered Feb 14, 2017 at 17:29

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

Comments

gabe3886 · Accepted Answer · 2017-02-14 17:30:42Z

3

You need to substitute the variable into the code:

$("#campus option[value='" + selected_campus + "']").prop('selected', true);

You would need the single quotes in case the value has spaces or other characters in it

answered Feb 14, 2017 at 17:30

gabe3886

4,2653 gold badges30 silver badges31 bronze badges

Collectives™ on Stack Overflow

Setting the selected value of a drop down using a javascript variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related