jQuery：根据文本设置选择列表'selected'，奇怪地失败了 [英] jQuery: Setting select list 'selected' based on text, failing strangely
问题描述
我一直在使用以下代码（使用jQuery v1.4.2）根据text描述而不是value来设置选择列表的selected属性：
I have been using the following code (with jQuery v1.4.2) to set the 'selected' attribute of a select list based on its 'text' description rather than its 'value':
$("#my-Select option[text=" + myText +"]").attr("selected","selected") ;
此代码工作正常，直到我注意到一个选项列表失败，具体取决于文本正在匹配。经过一些拉毛后，我意识到只有在文本是一个单词的情况下才会失败（没有空格，没有非字母字符）。 （我以前对此代码的所有使用都适用于仅包含多字化学名称的选择列表。）
This code worked fine, until I noticed one select list on which it failed, depending on the text that was being matched. After some hair-pulling I realized that it was failing only in cases where the text was a single word (no spaces, no non-alpha characters). (All of my previous uses of this code had worked fine with select lists comprised solely of multi-word chemical names.)
例如，在一个选择列表中，它工作正常：
pharbitic acid
25-D-spirosta-3,5-diene
pogostol（＃Pogostemon＃）
For example, within the one select list, it worked fine with:
pharbitic acid
25-D-spirosta-3,5-diene
pogostol (#Pogostemon#)
它失败了：
葡萄糖
腺嘌呤
It failed with:
glucose
adenine
我试过任何方式我可以想到用引号（单引号和双引号）包围文本变量无济于事。 （但是，当一个双字短语没有时，为什么一个单词需要引用？）
I have tried any way I could think of to surround the text variable with quotes (both single and double) to no avail. (But why should a single word need quotes when a two word phrase does not?)
我试过在那里对文本进行硬编码并得到相同的结果。
I have tried hard coding the text in there and had the same result.
这个有效：
$("#constituent option[text=#a#-allocryptopine]").attr('selected', 'selected');
这有效：
$("#constituent option[text=5-O-methylrisanrinol]").attr('selected', 'selected');
无法使用：
$("#constituent option[text=adenine]").attr('selected', 'selected');
我试过硬编码报价。 无法使用：
I tried hard coding quotes. This did not work:
$("#constituent option[text='glucose']").attr('selected', 'selected');
我无法使用硬编码引号（单个或双个）来处理 any text。
I could not get hard coded quotes (single or double) to work with any text at all.
值得注意的是，使用'value'属性时引号是可以接受的。例如，这两种工作都很好：
It's worth noting that quotes are acceptable when using the 'value' attribute. E.g., both of these work fine:
$("#constituent option[value='3']").attr('selected', 'selected');
$("#constituent option[value=3]").attr('selected', 'selected');
下面是一些演示此问题的代码。两个选择列表，第一个由简单的单词组成，两个单词短语中的第二个。页面加载时，它会尝试设置每个选择列表的值。 jQuery代码适用于第二个列表但不适用于第一个列表。 （我尝试在'猴子'中加一个空格来获得'mon key'并且它有效！）
Below is some code to demonstrate the problem. Two select lists, the first of which is comprised of simple words, the second of two word phrases. When the page loads it tries to set the value of each select list. The jQuery code works for the second list but not the first. (I tried putting a space in 'monkey' to get 'mon key' and it worked!)
以下代码的工作演示是这里。
A working demo of the code below is here.
我非常感谢对我的看法。在这里做错了。甚至是使用'text'属性的替代选择器语法。提前感谢所有有时间提供帮助的人。
I would greatly appreciate any insight into what I am doing wrong here. Or even an alternative selector syntax for using the 'text' attribute. Thanks in advance to all who have the time to assist.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="../js/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var text1 = 'Monkey';
$("#mySelect1 option[text=" + text1 + "]").attr('selected', 'selected');
var text2 = 'Mushroom pie';
$("#mySelect2 option[text=" + text2 + "]").attr('selected', 'selected');
});
</script>
</head>
<body>
<select id="mySelect1">
<option></option>
<option>Banana</option>
<option>Monkey</option>
<option>Fritter</option>
</select>
<select id="mySelect2">
<option></option>
<option>Cream cheese</option>
<option>Mushroom pie</option>
<option>French toast</option>
</select>
</body>
</html>
推荐答案
当<选项> ; 未获得 value =，文本变为值，所以你可以使用 .val（） 在< select> 上按值设置，如下所示：
When an <option> isn't given a value="", the text becomes its value, so you can just use .val() on the <select> to set by value, like this:
var text1 = 'Monkey';
$("#mySelect1").val(text1);
var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);
您可以在这里测试，如果示例不您所追求的并且他们实际上有一个值，请使用<选项> 元素的 .text 属性 .filter（） ，如下所示：
You can test it out here, if the example is not what you're after and they actually have a value, use the <option> element's .text property to .filter(), like this:
var text1 = 'Monkey';
$("#mySelect1 option").filter(function() {
return this.text == text1;
}).attr('selected', true);
var text2 = 'Mushroom pie';
$("#mySelect2 option").filter(function() {
return this.text == text2;
}).attr('selected', true);
这篇关于jQuery：根据文本设置选择列表'selected'，奇怪地失败了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
