如何使用jQuery设置下拉选择框的值及选中值为Booking

先聊聊你当前代码不生效的核心问题，再一步步解决：

• id位置错误：你把id="status"加在了第一个<option>标签上，但jQuery选择器$('#status')需要选中的是整个下拉选择框（也就是<select>标签），所以得把id移到<select>上。
• option的value为空：所有<option>的value都是空字符串，就算你调用val("Booking")，也找不到对应value的选项，自然没法选中。

步骤1：修正HTML结构 #

先调整下拉框代码，给<select>加上id，同时给每个option设置正确的value值（如果要选中"Booking"，记得添加对应的选项）：

<select name="status" id="status" class="form-control">
  <option value="New">New</option>
  <option value="Follow">Follow</option>
  <option value="DND">DND</option>
  <option value="Dead">Dead</option>
  <option value="Booking">Booking</option> <!-- 新增该选项，确保存在value为Booking的选项 -->
</select>

步骤2：用jQuery设置选中值 #

根据需求，有两种常用设置方式：

方式1：通过option的value值设置（推荐）

如果option有对应value，直接用val()方法就能快速设置：

$('#status').val("Booking");

方式2：通过option的文本内容设置

如果option没设置value，或者需要按文本匹配选中，可使用这种方式：

// 找到文本为"Booking"的option，设置它为选中状态
$("#status option:contains('Booking')").prop('selected', true);

额外提醒：确保DOM加载完成 #

为了避免元素还没加载就执行代码导致失效，建议把设置代码放在DOM加载完成的回调里：

$(document).ready(function() {
  $('#status').val("Booking");
});

这样就能成功把下拉框的选中值设置为Booking啦～

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