在前端开发中，经常需要将代码与用户交互。其中一个常见的方式是使用表单控件，例如下拉框（select）。在某些情况下，我们可能会希望通过文本描述来设置选中某个选项，而不是使用 option 元素的 value 属性。这时候，jQuery 可以提供一个简便的解决方案。
设置选定值
通过 jQuery 设置 select 的选定值非常简单。以下是代码示例：
// 假设我们有一个 select 控件
var selectControl = $('select#mySelect');
// 根据选项文本设置选定值
selectControl.val('Option 2');
// 或者根据选项索引设置选定值
selectControl.prop('selectedIndex', 1);这里的 val() 方法和 prop() 方法都可以用于设置选定值。第一个方法接受选项文本作为参数，而第二个方法接受选项索引。
深入理解
上述实现背后的原理是：当我们调用 val() 方法时，jQuery 会循环遍历 select 中的所有 option 元素，并比较它们的 value 属性和传入的参数。如果匹配成功，就将该 option 元素的 selected 属性设置为 true。而当我们调用 prop() 方法并传入 selectedIndex 参数时，jQuery 会直接将 select 元素的 selectedIndex 属性设置为该值。
需要注意的是，这种方法只适用于选项文本或索引唯一对应一个 option 元素的情况。如果有多个选项文本或索引匹配同一个 option 元素，那么将会选中第一个匹配的选项。
实际应用
这种设置 select 选定值的方法可以广泛应用于前端开发中。比如，在表单提交时，对用户所输入的数据进行验证，然后将错误提示和用户之前的选择一同带回给页面，以便用户修改并重新提交。此时，我们可以利用上述方法将用户之前的选择自动选中。
-- -------------------- ---- -------
--- ---------- - ------- --- -- -------------
--- ------------- - ---------------------
-- ---------------
--- ------------- - ---------------------------------------------- -
------ -------------- --- -----------
---
-- --------------------- - -- -
-- -------------
------------------------------
- ---- -
-- ------------------
----------------------
-在这个例子中，我们首先检查用户的选择是否与 select 中的某个选项匹配。如果有匹配的选项，就将其选中；否则，我们将 select 的选定值设置为空，以便用户重新选择。
总结
通过 jQuery 设置 select 控件的选定值，可以方便地通过文本描述来选中选项。这种方法简单易用，在实际开发中也有广泛应用。需要注意的是，该方法只适用于选项文本或索引唯一对应一个 option 元素的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8143