4

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

6 回答 6

26

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

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

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

var myText = "Arizona";
$('#state option').filter(function () { return $(this).html() == myText; }).prop('selected', true)
于 2013-07-25T22:42:34.080 回答
15

解决了。由于我已经将元素作为 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);
}
于 2013-07-25T23:09:55.007 回答
8

我不确定我是否完全理解你的问题，但我试图在这个小提琴中回答它

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

$("#state").val( a_value );
于 2013-07-25T23:20:34.453 回答
2

你可以设置它 $("#select_id").prop("selectedIndex", 3); // Select index starts from zero.

例如阅读这里。

于 2014-03-24T11:26:26.030 回答
1 
$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 将使用至少两个循环本身来执行此操作......

于 2013-07-25T23:09:12.817 回答
1

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

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。

于 2015-12-02T06:02:13.730 回答