【问题标题】：jQuery - Set the selected option of a select box using value or text with options nested in optgroupsjQuery - 使用嵌套在 optgroups 中的选项的值或文本设置选择框的选定选项
【发布时间】：2016-11-16 09:41:31
【问题描述】：

所以我正在编写一个需要输入地址的应用程序，并且我有一个 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);

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

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

$element

所以如果可能的话，我需要一种方法来做到这一点：

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

【问题讨论】：

也许使用 jquery 的 has() 类。 api.jquery.com/has
$('#state option').filter(function(){ return $(this).text()===mytext;}).prop('selected', true); ?
另一个问题，我在 jQuery 插件中执行此操作，以便函数接收选择元素作为参数。我将此添加到问题的底部。

标签： javascript jquery html html-select

【解决方案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)

【讨论】：

【解决方案2】：

解决了。由于我已经将元素作为 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);
}

【讨论】：

【解决方案3】：

我不确定我是否完全理解了你的问题，但我试图在fiddle 中回答它

诀窍是你可以通过直接设置选择框的值来选择它

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

【讨论】：

【解决方案4】：

您可以通过$("#select_id").prop("selectedIndex", 3); // Select index starts from zero.进行设置

阅读这里例如this。

【讨论】：

【解决方案5】：

$element = $('select#state');
$options = $element.find('option');
$wanted_element = $options.filter(function () {
  return $(this).val() == "Alabama" || $(this).text() == "Alabama"
});
$wanted_element.prop('selected', true);

这是一种方法。

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

【讨论】：

看起来你刚刚打败了我。这基本上就是我解决它的方法。

【解决方案6】：

我来晚了，但对于未来的访客，最简单的方法是：

html

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

jQuery

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

输出：这将激活 ENT。

【讨论】：