如何判断变量是否包含下拉框选项并设置对应选项为选中状态

需求 #

页面里有个包含多个值的变量，还有两个<select>下拉框。要实现：如果变量包含某个下拉选项的值，就把该选项设为选中状态。本示例需要选中第一个下拉框的Webinar，第二个的Transport Management。

原代码问题 #

原代码存在两个问题：

• JavaScript字符串没有contains()方法，需使用includes()（兼容旧浏览器可改用indexOf() !== -1）
• 用attr('selected', true)设置选中状态不合适，jQuery操作布尔类型DOM属性时，prop()方法更可靠

修正后的完整代码 #

HTML部分 #

<div class="dropdowns-group">
  <div class="dropdown">
    <label for="test">Test</label>
    <select class="select-dropdown" name="test" id="test">
      <option value="">Show all</option>
      <option value="Webinar">Webinar</option>
      <option value="Lecture">Lecture</option>
    </select>
  </div>

  <div class="dropdown">
    <label for="test2">Test2</label>
    <select class="select-dropdown" name="test2" id="test2">
      <option value="">Show all</option>
      <option value="Transport Management">Transport Management</option>
      <option value="Teaching">Teaching</option>
    </select>
  </div>
</div>

JavaScript部分 #

var query = "Webinar, Transport Management";

// 将变量拆分为去空格后的数组，避免部分匹配出错
var targetValues = query.split(',').map(val => val.trim());

$('select.select-dropdown option').each(function() {
  const optionVal = $(this).val();
  // 跳过空值选项，只匹配目标数组中存在的选项
  if (optionVal && targetValues.includes(optionVal)) {
    $(this).prop('selected', true);
  }
});

关键说明 #

• 精确匹配：把字符串拆分为数组再进行匹配，避免出现类似query包含"Web"就误选中"Webinar"的情况。
• 正确设置选中状态：prop()专门用于处理DOM元素的布尔属性（如selected、checked），比attr()更准确，不会出现属性设置后不生效的问题。

内容的提问来源于stack exchange，提问作者PizzaTime