javascript - jQuery - 使用嵌套在选项组中的选项的值或文本设置选择框的选定选项

Question

所以我正在编写一个需要地址输入的应用程序，并且我有一个 select 元素供用户选择州/省。它需要支持 US 和 Canada，因此它嵌套了 optgroups 来将它们分开，并且将单个第一级选项作为默认值。这是一个基本示例:

<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>

现在我需要以编程方式选择与来自外部源的输入相匹配的选项，并且我想根据选项元素的值或其文本来检查匹配项。无论哪个选项匹配，都将被设置为所选选项。我知道您可以使用

按值设置所选选项

$("#state").val(myValue)

我知道你可以通过这种方式设置基于文本的选项

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

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

另一个复杂的问题是，我将在外部 jQuery 插件中执行此操作。在我需要修改的函数中，我将选择元素作为变量

$element

所以如果可能的话，我需要一种类似这样的方法:

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

Answer 1

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

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

如果您想按选项的标签搜索，请使用过滤器:

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