jQuery:根据文本设置选择列表'selected',奇怪地失败了

Stu*_*len 51 javascript jquery

我一直在使用以下代码(使用jQuery v1.4.2)根据"text"描述而不是"value"来设置选择列表的"selected"属性:

$("#my-Select option[text=" + myText +"]").attr("selected","selected") ;
Run Code Online (Sandbox Code Playgroud)

这段代码工作正常,直到我注意到一个选项列表失败,这取决于匹配的文本.经过一些拉毛后,我意识到只有在文本是一个单词的情况下才会失败(没有空格,没有非字母字符).(我以前对此代码的所有使用都适用于仅包含多字化学名称的选择列表.)

例如,在一个选择列表中,它适用于:
pharbitic acid
25-D-
spirosta -3,5-diene pogostol(#Pogostemon#)

它失败了:
葡萄糖
腺嘌呤

我试过任何方式,我可以想到用引号(单一和双)包围文本变量无济于事.(但是,当一个双字短语没有时,为什么一个单词需要引用?)

我试过在那里硬编码文本并得到相同的结果.

这有效:

$("#constituent option[text=#a#-allocryptopine]").attr('selected', 'selected');
Run Code Online (Sandbox Code Playgroud)

这有效:

$("#constituent option[text=5-O-methylrisanrinol]").attr('selected', 'selected');
Run Code Online (Sandbox Code Playgroud)

不起作用:

$("#constituent option[text=adenine]").attr('selected', 'selected');
Run Code Online (Sandbox Code Playgroud)

我试着用硬编码引号.这不起作用:

$("#constituent option[text='glucose']").attr('selected', 'selected');
Run Code Online (Sandbox Code Playgroud)

我无法使用硬编码引号(单或双)来处理任何文本.

值得注意的是,使用'value'属性时引用是可以接受的.例如,这两个都很好:

$("#constituent option[value='3']").attr('selected', 'selected');

$("#constituent option[value=3]").attr('selected', 'selected');
Run Code Online (Sandbox Code Playgroud)

下面是一些演示此问题的代码.两个选择列表,第一个由简单的单词组成,两个单词短语中的第二个.页面加载时,它会尝试设置每个选择列表的值.jQuery代码适用于第二个列表但不适用于第一个列表.(我尝试在'猴子'中放一个空格来获得'mon key',它有效!)

下面的代码的工作演示是在这里.

我非常感谢能够洞察我在这里做错了什么.甚至是使用'text'属性的替代选择器语法.提前感谢所有有时间提供帮助的人.

<!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>
Run Code Online (Sandbox Code Playgroud)

Nic*_*ver 111

当a <option>没有给出时value="",文本就变成了它value,所以你可以使用.val()on <select>来设置值,如下所示:

var text1 = 'Monkey';
$("#mySelect1").val(text1);

var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);
Run Code Online (Sandbox Code Playgroud)

您可以在这里测试它,如果示例不是您所追求的并且它们实际上有值,请使用<option>元素的.text属性.filter(),如下所示:

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);?
Run Code Online (Sandbox Code Playgroud)

你可以在这里测试那个版本.

  • 现代读者应该注意到这个答案已经过时了; 使用`.attr('selected',true);`将在jQuery 1.9+中失败,并且自jQuery 1.6以来已被弃用.你应该使用`.prop('selected',true)`代替.请参见http://stackoverflow.com/a/496126/1709587 (11认同)

Dei*_*ide 14

__CODE__

这将返回包含文本说明的第一个选项.


Sco*_*ttE 12

试试这个:

$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);
Run Code Online (Sandbox Code Playgroud)