[英]jQuery - Set the selected option of a select box using value or text with options nested in optgroups
So I am writing an app that requires an address input and I have a select
element for the user to select the state/province. 所以我正在编写一个需要地址输入的应用程序,我有一个select
元素供用户选择州/省。 It needs to support the US
and Canada
so it has nested optgroups
to separate those out and a single, first level option as it's default value. 它需要支持US
和Canada
所以它有嵌套的optgroups
来分隔那些和一个单一的第一级选项,因为它是默认值。 Here is a basic example: 这是一个基本的例子:
<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>
Now I need to programmatically select the option that matches input from an external source and I want to check for a match based on both the value of the option element or its text. 现在我需要以编程方式选择匹配来自外部源的输入的选项,并且我想根据option元素的值或其文本检查匹配。 Whichever option is a match would then be set as the selected option. 无论哪个选项匹配,都将被设置为所选选项。 I know you can set the selected option by value using 我知道您可以使用值设置所选选项
$("#state").val(myValue)
and I know you can set an option based on text in this way 而且我知道您可以通过这种方式基于文本设置选项
var myText = "The state I want.";
$("#state").children().filter(function() {
return $(this).text() == myText;
}).prop('selected', true);
Is there a clean way to do this without having to run through each child and checking if it's an optgroup and then running through all its children to check for a match? 有没有一个干净的方法来做到这一点,而不必经过每个孩子,检查它是否是一个optgroup,然后运行所有的孩子检查匹配? Is there an easy way through jQuery to combine the value and text methods of setting the selected option? 有没有一种简单的方法通过jQuery来组合设置所选选项的值和文本方法?
One other complication, I am going to be doing this within an external jQuery plugin. 另一个复杂的问题是,我将在外部jQuery插件中执行此操作。 Within the function I need to modify I have the select element as a variable 在我需要修改的函数中,我将select元素作为变量
$element
so I need a way to do it kind of like this if possible: 所以我需要一种方法来做到这一点,如果可能的话:
$element.descendents(":option").filter(function() {
//do the selecting here
}).prop('selected', true);
If you want to select by the option value, use the value selector: 如果要按选项值进行选择,请使用值选择器:
var myText = "AZ";
$('#state option[value="' + myText + '"]').prop('selected', true);
If you want to search by the option's label, use a filter: 如果要按选项的标签搜索,请使用过滤器:
var myText = "Arizona";
$('#state option').filter(function () { return $(this).html() == myText; }).prop('selected', true)
Solved. 解决了。 Since I already had my element passed to a function as a jQuery variable, $element, I couldn't just use the standard selector in the form of: 因为我已经将我的元素作为jQuery变量$元素传递给函数,所以我不能只使用以下形式的标准选择器:
$("#state option").filter(
// filter function
).prop('selected', true);
After a lot of trying, I got this and it works: 经过大量的尝试,我得到了它,它的工作原理:
function functionIHadToChange($element, value) {
// other code
$element.find("option").filter(function(){
return ( ($(this).val() == value) || ($(this).text() == value) )
}).prop('selected', true);
}
You can set it by $("#select_id").prop("selectedIndex", 3); // Select index starts from zero.
您可以通过$("#select_id").prop("selectedIndex", 3); // Select index starts from zero.
设置它$("#select_id").prop("selectedIndex", 3); // Select index starts from zero.
$("#select_id").prop("selectedIndex", 3); // Select index starts from zero.
$element = $('select#state');
$options = $element.find('option');
$wanted_element = $options.filter(function () {
return $(this).val() == "Alabama" || $(this).text() == "Alabama"
});
$wanted_element.prop('selected', true);
Would be one way to do it. 这将是一种方法。
But i would guess, without knowing the exact internas of the .find()
method, in the end jQuery will use at least two loops itself to perform this... 但我猜,在不知道.find()
方法的确切内部的情况下,jQuery最终将使用至少两个循环来执行此操作...
I'm late here but for future visitor, easiest way to do that is : 我来晚了,但对于未来的访客,最简单的方法是:
<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>
$('select[name="dept"]').val('3');
Output: This will active ENT . 输出:这将激活ENT 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.