使用javascript变量设置下拉列表的选定值

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 ?

Answer 1

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.

Answer 2

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