如何使用jQuery在select组件中选中指定的option？

首先，咱们先理清你遇到的核心问题：精准定位目标option、解除它的禁用状态、设置它为选中状态。你之前的尝试里有两个关键小问题：jQuery并没有text属性选择器，所以option[text="20x20"]无法定位到元素；另外操作禁用状态时，用prop比attr更适合处理布尔类型的DOM属性。

下面针对你的需求（选中对应3的30x30选项），给出几种可行的方案：

方案一：精准匹配文本（推荐，避免误匹配） #

如果你的option没有设置value属性，我们可以用filter函数精准匹配option的文本内容，这样即使有相似文本也不会出错：

// 定位到文本完全等于"30x30"的option
const targetOption = $('select[name="dropdown"] option').filter(function() {
  return $(this).text().trim() === "30x30";
});

// 解除该选项的禁用状态
targetOption.prop('disabled', false);
// 设置该选项为选中状态
targetOption.prop('selected', true);

方案二：使用contains选择器（适合无相似文本的场景） #

如果确定不会有和"30x30"相似的文本（比如"30x300"），可以用:contains()选择器简化代码：

$('select[name="dropdown"] option:contains("30x30")')
  .prop('disabled', false) // 解除禁用
  .prop('selected', true); // 设置选中

方案三：给option添加value属性（更简洁的长期方案） #

如果可以修改HTML结构，给每个option加上对应的value属性会让后续操作更直观：

<select name="dropdown">
    <option disabled value="1">10x10</option>
    <option disabled value="2">20x20</option>
    <option disabled value="3">30x30</option>
</select>

然后只需要几行代码就能完成需求：

const dropdown = $('select[name="dropdown"]');
// 解除value为3的选项的禁用
dropdown.find('option[value="3"]').prop('disabled', false);
// 设置选中该选项
dropdown.val(3);

为什么你的尝试没生效？ #

1. 错误使用了text属性选择器：jQuery没有内置的text属性选择器，无法通过option[text="xxx"]定位元素；
2. attr与prop的区别：disabled是DOM元素的布尔属性，用prop('disabled', false)才能正确修改它的状态，attr操作的是HTML属性，在处理布尔属性时容易出现不一致的情况。

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