的HTML

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>

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

按值设置所选选项

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

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

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

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)

Answer 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);
}

Answer 3

我不确定我完全理解你的问题，但我试图在此fiddle

中回答这个问题

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

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

Answer 4

您可以按$("#select_id").prop("selectedIndex", 3); // Select index starts from zero.

进行设置

请在此处阅读this。

Answer 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最终会使用至少两个循环来执行此操作...

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

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

6 个答案:

的HTML

的jQuery