使用 optgroups 设置按选项值选择答案

【问题标题】：Set a select by option value with optgroups使用 optgroups 设置按选项值选择
【发布时间】：2016-03-07 12:32:52
【问题描述】：

我们在美国和加拿大开展业务，因此在注册表单上，我有一个选择，其中包含将美国各州与加拿大各省区分开来的 optgroup。我使用这两个字符代码并将它们存储在数据库中。当我想编辑客户信息时，我希望使用与注册表相同的选项；但是，我似乎无法通过值找到州或省，然后将其标记为选中。

这里是一个选择示例：

<select id="company-state">
     <option value="">Select One</option>
     <optgroup label="United States">
          <option value="AK">Alaska</option>
          <option value="AL">Alabama</option>
          ...
          <option value="WV">West Virginia</option>
          <option value="WY">Wyoming</option>
     </optgroup>
     <optgroup label="Canada">
          <option value="AB">Alberta</option>
          <option value="BC">British Columbia</option>
          ...
          <option value="SK">Saskatchewan</option>
          <option value="YT">Yukon Territory</option>
     </optgroup>
</select>

我尝试了许多解决方案，例如尝试按值或按序数查找选项，但似乎没有任何效果。

【问题讨论】：

标签： jquery html html-select optgroup

【解决方案1】：

简单的 jQuery 答案：

var value = "foo";
$('#company-state option[value="' + value +'"]');

Live DEMO

要“将其标记为选中”，您可以添加到选择器：

$('#company-state option[value="' + value +'"]').prop('selected', true);

【讨论】：

如果不同的 optgroup 中存在相同的选项值，这将不起作用。在这种情况下，它将始终选择最后一个选项。

【解决方案2】：

只需使用 .val 运算符设置下拉菜单的值，您就可以开始了。请检查小提琴。

var value = "SK";
$("#company-state").val(value);
alert($('#company-state').val());

https://jsfiddle.net/2t48cqho/

【讨论】：