使用JavaScript变量设置下拉框的选定值

Question

我正在使用JQuery创建动态下拉框（第一个下拉框的选择过滤第二个选项）。我试图为反向使用情况创建一个检查（第二个下拉框的选择强制在第一个下拉框中关联选择）。

我以前使用过这段代码成功设置活动值：

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

现在，我正在尝试使用变量值而不是硬编码来完成与上面相同的操作。这是我目前的代码：

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

第一行可以正常工作，所需的值已成功存储在selected_campus中。但是第二行不行。如何将#campus的选定值设置为selected_campus？

- Carrie Brown

---

请注意，split返回一个数组，您需要将该数组强制转换为字符串。这个方法能够奏效仅因为您添加了一个限制条件，所以在数组中始终只有一个项，将该数组转为字符串时会得到期望的结果，希望如此。我认为像 split(':').shift() 这样的选项才是更好的选择？而且使用一些数据属性来标识选项会更好。 - adeneo

@adeneo 感谢您的反馈。我还是很新手，所以不知道 shift()，它似乎正好符合我的需求！ - Carrie Brown

整行代码看起来有些奇怪，可能有更好的方法将选项绑定成某种系统。 - adeneo

Answer 1

您需要将变量替换到代码中：

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

如果值中含有空格或其他字符，则需要使用单引号

- gabe3886

Answer 2

你已经接近了答案；你只需要用+号和单引号'将变量selected_campus与选择器（字符串）连接起来，例如：

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

改为：

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

希望这可以帮到您。

- Zakaria Acharki