Javascript jQuery：设置选择列表'；选定的'；基于文本，奇怪地失败了_Javascript_Jquery

Javascript jQuery：设置选择列表'；选定的'；基于文本，奇怪地失败了

javascript jquery

Javascript jQuery：设置选择列表'；选定的'；基于文本，奇怪地失败了,javascript,jquery,Javascript,Jquery,我一直在使用以下代码（jqueryv1.4.2）根据选择列表的“文本”描述而不是“值”设置选择列表的“selected”属性： $("#my-Select option[text=" + myText +"]").attr("selected","selected") ; 这段代码工作得很好，直到我注意到一个选择列表失败，这取决于匹配的文本。经过一番梳理，我意识到只有在文本是单个单词（没有空格，没有非字母字符）的情况下，它才会失败。（我以前使用的所有代码都可以很好地处理由多个单词的化学名称组成

我一直在使用以下代码（jqueryv1.4.2）根据选择列表的“文本”描述而不是“值”设置选择列表的“selected”属性：

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

这段代码工作得很好，直到我注意到一个选择列表失败，这取决于匹配的文本。经过一番梳理，我意识到只有在文本是单个单词（没有空格，没有非字母字符）的情况下，它才会失败。（我以前使用的所有代码都可以很好地处理由多个单词的化学名称组成的选择列表。）

例如，在one select列表中，它可以很好地处理：
药物酸
25-D-螺甾-3,5-二烯
广藿香醇

失败原因：
葡萄糖
腺嘌呤

我尝试了我能想到的任何方法，用引号（单引号和双引号）包围文本变量，但都没有成功。（但为什么一个单词需要引号，而一个两个单词的短语不需要引号呢？）

我已经在那里努力编码文本，并得到了同样的结果

这项工作：

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

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

这项工作：

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

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

此不起作用：

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

我努力地编写了引语。此不起作用：

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

我根本无法使用硬编码引号（单引号或双引号）来处理任何文本

值得注意的是，在使用“value”属性时，引号是可以接受的。例如，这两项工作都很好：

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

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

下面是一些代码来演示这个问题。两个选择列表，第一个由简单单词组成，第二个由两个单词短语组成。当页面加载时，它尝试设置每个选择列表的值。jQuery代码适用于第二个列表，但不适用于第一个列表。（我试着在“monkey”中加一个空格来获得“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>


$（文档）.ready（函数（）{
var text1='猴子'；
$（“#mySelect1选项[text=“+text1+”]”）attr（'selected'，'selected'）；
var text2=‘蘑菇派’；
$（“#mySelect2选项[text=“+text2+”]”）attr（'selected'，'selected'）；
});
香蕉
猴子
油炸馅饼
奶油干酪
蘑菇派
法式吐司

试试这个：

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

在您的测试用例（在Firefox中测试）中使用该函数似乎是可行的。选择器如下所示：

$('#mySelect1 option').filter(function () {
    return $(this).text() === 'Banana';
});

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

var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);

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

当一个

没有被赋予

值=“

”时，文本就变成了它的

值，所以你可以在
上使用来设置值，如下所示：
$('#mySelect1 option').filter(function () {
    return $(this).text() === 'Banana';
});

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

var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);

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

，如果示例不是您想要的，并且它们实际上有一个值，请使用
元素的.text
属性，如下所示：
$('#mySelect1 option').filter(function () {
    return $(this).text() === 'Banana';
});

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

var text2 = 'Mushroom pie';
$("#mySelect2").val(text2);

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

.
以下内容适用于带空格和不带空格的文本条目：
$("#mySelect1").find("option[text=" + text1 + "]").attr("selected", true);

如果有人用谷歌搜索，上面的解决方案对我不起作用，所以我结束了使用“纯”javascript
document.getElementById("The id of the element").value = "The value"

这将设置值并在组合框中选择当前值。在firefox中测试
这比在谷歌上搜索jQuery的解决方案要容易得多。我尝试了其中一些方法，直到找到了一个可以在Firefox和IE中使用的方法。这就是我想到的
$("#my-Select").val($("#my-Select" + " option").filter(function() { return this.text == myText }).val());

另一种更具可读性的书写方式：
var valofText = $("#my-Select" + " option").filter(function() {
    return this.text == myText
}).val();
$(ElementID).val(valofText);

伪代码：
$("#my-Select").val( getValOfText( myText ) );

这将返回包含文本描述的第一个选项
 我们可以通过在下拉列表的选项中搜索文本，然后将selected属性设置为true来实现
此代码在每个环境中都运行
 $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected');

setSelectedByText:函数（eID，文本）{
var ele=document.getElementById（eID）；
对于（var ii=0；ii，如果要在下拉文本基础上选择值，则应使用以下更改：
以下是示例，国家名称是动态的：
    <select id="selectcountry">
    <option value="1">India</option>
    <option value="2">Ireland</option>
    </select>
    <script>
     var country_name ='India'
     $('#selectcountry').find('option:contains("' + country_name + '")').attr('selected', 'selected');
    </script>


印度
爱尔兰
var country_name='India'
$（“#selectcountry”）.find（'option:contains（“+country_name+”））.attr（'selected'，'selected'）；
我通常使用：
$("#my-Select option[text='" + myText +"']").attr("selected","selected") ;

有什么原因不能简单地设置列表的选定索引吗？基于文本值进行选择并不是最好的方法。我明白你的意思，但我当时不知道索引值。基本上，我从数据库中构建了一个数据表，用户可以通过单击它来编辑一行，下面的许多选定列表都用h表中的值（这就是我使用上述代码的目的）。可以从一个或多个列表中选择不同的值，然后使用$.ajax更新数据库和表。选择列表索引值是数据库表中的id值。理论上，我可以将这些值与文本描述一起无形地存储在表中，但我正试图尽可能减少开销。非常感谢您的帮助ick响应。正是我想要的。（事实上，我在实际代码中设置了值。）如果有人知道我的原始代码在特定情况下失败的原因，我仍然非常感兴趣…@Snubian-代码的大小写是否正确？匹配将区分大小写。我肯定代码大小写是正确的，正如我试图描述的，代码只在非常特定的情况下失败。我已经测试过了使用如上所述的硬编码值。我的测试代码中“Monkey”示例的失败似乎表明这种用法在某些情况下失败。在JSFIDLE上运行代码，您可以看到是否只需在“Mon key”中添加一个空格，text1变量和列表选项都突然起作用。+1我需要匹配选项值，而不是标签文本。这是通过返回this.val（）==text2实现的；
现代读者应该注意，这个答案已经过时；使用.attr（'selected'，true）；
将在jQuery 1.9+中失败，并且自jQuery 1.6以来已被弃用