代码之家 › 专栏 › 技术社区 › Stuart Allen

jQuery:基于文本设置select list“selected”,奇怪地失败了

jquery javascript

Stuart Allen · 技术社区 · 14 年前

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

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

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

例如,在one select列表中,它可以很好地处理:
药物酸

广藿香醇

失败原因:
葡萄糖
腺嘌呤

我尝试过任何我能想到的方法,用引号(单引号和双引号)将文本变量括起来,但都没有用。(但是为什么一个单词需要引号,而一个两个单词的短语不需要?)

这样做有效:

$("#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”,结果成功了!)

下面是代码的工作演示 here .

如果你能了解我在这里做错了什么,我将不胜感激。或者使用“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>

12 回复 | 直到 14 年前

115

Nick Craver 14 年前

<option> 没有给一个 value="" ,文本将成为其 value ,所以你可以用 .val() 上 <select> 按值设置,如下所示:

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

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

You can test it out here ,如果示例为不你所追求的,他们实际上有一个价值,使用 < 元素的 .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);â

You can test that version here .

Deivide 5 年前

$("#my-select option:contains(" + myText +")").attr("selected", true);

这将返回包含文本描述的第一个选项。

ScottE 14 年前

试试这个:

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

wsanville 14 年前

使用 filter() 函数似乎在您的测试用例中工作(在Firefox中测试)。选择器如下所示:

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

Ly Thanh Ngo 7 年前

我通常使用:

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

chepe263 13 年前

如果有人用谷歌搜索这个,上面的解决方案对我不起作用,所以我结束了使用“纯”javascript

document.getElementById("The id of the element").value = "The value"

这比一直在google上搜索jQuery的解决方案要容易得多

CoolBeans Jake 13 年前

以下适用于带空格和不带空格的文本条目:

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

maxhb 9 年前

我们可以在下拉列表的选项中搜索文本,然后将selected属性设置为true。

此代码在每个环境中都运行。

 $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected');

ash 8 年前

setSelectedByText:function(eID,text) {
    var ele=document.getElementById(eID);
    for(var ii=0; ii<ele.length; ii++)
        if(ele.options[ii].text==text) { //Found!
            ele.options[ii].selected=true;
            return true;
        }
    return false;
},

Community CDub 5 年前

如果要在下拉文本基础上选择值,则应使用以下更改:

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

-1

user2561852 10 年前

我尝试了一些这样的东西,直到我找到了一个在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 ) );