Javascript jQuery-使用值或文本设置选择框的所选选项，选项嵌套在optgroup中

因此，我正在编写一个需要地址输入的应用程序，我有一个select元素供用户选择州/省。它需要支持美国和加拿大，因此它有嵌套的optgroup来分隔这些选项，并有一个第一级选项作为默认值。以下是一个基本示例：

<select name="state" id="state">
  <option class="co" value="" data-placeholder="true" disabled selected>Choose your state...</option>
  <optgroup label="United States">
    <option class="co" value="AL">Alabama</option>
    <option class="co" value="AK">Alaska</option>
    <option class="co" value="AZ">Arizona</option>
  </optgroup>
  <optgroup label="Canada">
    <option class="co" value="AB">Alberta</option>
    <option class="co" value="BC">British Columbia</option>
    <option class="co" value="MB">Manitoba</option>
  </optgroup>

我知道你可以用这种方式设置一个基于文本的选项

var myText = "The state I want.";
$("#state").children().filter(function() {
  return $(this).text() == myText;
}).prop('selected', true);

有没有一种干净的方法可以做到这一点，而不必遍历每个子级并检查它是否是optgroup，然后遍历它的所有子级以检查是否匹配？通过jQuery是否有一种简单的方法来组合设置所选选项的值和文本方法

另一个复杂的问题是，我将在一个外部jQuery插件中完成这项工作。在我需要修改的函数中，我将select元素作为变量

$element

因此，如果可能的话，我需要一种这样做的方法：

$element.descendents(":option").filter(function() {
  //do the selecting here
}).prop('selected', true);

---

如果要按选项值进行选择，请使用值选择器：

var myText = "AZ";
$('#state option[value="' + myText + '"]').prop('selected', true);

如果要按选项的标签进行搜索，请使用过滤器：

var myText = "Arizona";
$('#state option').filter(function () { return $(this).html() == myText; }).prop('selected', true)

这是一种方法

---

但我想，在不知道.find方法的确切内部结构的情况下，最终jQuery将使用至少两个循环本身来执行此操作…

。由于我已经将元素作为jQuery变量$element传递给函数，因此我不能仅使用以下形式的标准选择器：

$("#state option").filter(
  // filter function
).prop('selected', true);

经过多次尝试，我得到了这个结果：

function functionIHadToChange($element, value) {
  // other code
  $element.find("option").filter(function(){
      return ( ($(this).val() == value) || ($(this).text() == value) )
    }).prop('selected', true);
}

---

我不确定我是否完全理解了你的问题，但我正试图用这种方式来回答它

诀窍在于，您可以通过直接设置选择框的值来选择它

$("#state").val( a_value );

您可以通过$select\u id.propselectedIndex，3；//进行设置选择索引从零开始

---

例如，请阅读这里。

我在这里迟到了，但对于未来的访客来说，最简单的方法是：

html 输出：这将激活ENT

---

可能使用jquery中的has类。$'状态选项'.filterfunction{return$this.text==mytext；}.prop'selected'，true？另一个问题是，我在jQuery插件中这样做，以便函数接收select元素作为参数。我把这个加在了问题的最下面。看起来你刚刚在这方面击败了我。我就是这样解决的。

function functionIHadToChange($element, value) {
  // other code
  $element.find("option").filter(function(){
      return ( ($(this).val() == value) || ($(this).text() == value) )
    }).prop('selected', true);
}

$("#state").val( a_value );

<select name="dept">
<option value="">This doctor belongs to which department?</option>
<option value="1">Orthopaedics</option>
<option value="2">Pathology</option>
<option value="3">ENT</option>
</select>

$('select[name="dept"]').val('3');