jquery-traversing：选择->选项->文本答案

【问题标题】：jquery-traversing: select -> option -> textjquery-traversing：选择->选项->文本
【发布时间】：2011-06-27 21:47:01
【问题描述】：

我想将变量与选择 -> 选项 -> 选择的文本进行比较以更改“选定”属性，这是我的代码，它可以工作，但我认为这不是最好的编写方式，请原谅我英文，我用谷歌翻译求助嘿嘿嘿：

var lista = 'example 1'; 
$("#id option").each(function(){
  if($(this).text() == lista){
    $(this).attr('selected','selected');
  }
});

这是html：

<select id="id" >
  <option value="0" >example 1</option>
  <option value="1" >example 2</option>
</select>

这里有一些尝试

$('#id option:eq("'+lista+'")').attr('selected','selected')

$("#id option[text='"+lista+"']").attr('selected','selected')

【问题讨论】：

【解决方案1】：

这应该有效：

$("#id option").attr('selected', function() {
    return this.innerHTML === lista;
});

【讨论】：

【解决方案2】：

你可以试试这个，而不是循环遍历每个：

var lista = 'example 1'; 
$('#id option:contains(' + lista + ')').attr('selected', true);

或

$('#id option:[text="' + lista + '"]').attr('selected', true);

同样有效。这仅取决于您的变量 lista 需要完全匹配还是部分匹配。

【讨论】：

第二个选项很完美，我需要完全匹配，我觉得我很接近了嘿嘿
@Victor 你确定吗？ :) 我不知道为什么，但代码只有在冒号存在时才有效……见这里：jsfiddle.net/YbfqZ/1
@Victor 你是说你不小心把冒号放在那个位置，却发现它只能这样工作？太搞笑了:)
这种行为的原因是您的冒号破坏了querySelectorAll 的选择器，因为它无效。因此，它默认为 Sizzle，它可以容忍冒号，即使它在技术上不受支持（这意味着它将来可能会中断）。我猜 Sizzle 会同时检查 attributes 和 properties。因此，它不会找到 text 属性，但会找到 text 属性（正如我的答案中使用的属性）。
...借用@Šime Vidas 的提琴，here's an example 证明 Sizzle 将匹配一个属性，而不仅仅是一个属性与其attribute-equals 选择器。

【解决方案3】：

你所拥有的并没有什么问题，jQuery 将在幕后或多或少地做同样的事情。

如果你想将它们链接在一起，你可以使用filter()：

var lista = 'example 1'; 
$('#id option').filter(function () { 
    return $(this).text() == lista; 
})[0].selected = true;

:contains 可能对您有用，但它的作用类似于通配符匹配，例如cat 将匹配 category:

var lista = 'example 1'; 
$('#id option:contains(' + lista + ')')[0].selected = true;

【讨论】：

我需要一个不区分大小写的包含。这可能吗？
@Kees：您必须走filter() 路线并使用带有i 修饰符的正则表达式test()。如果您遇到困难，请提出问题；这样的事情会在几分钟内给你答案。
是的，我使用了过滤器。感谢您的建议！

【解决方案4】：

您的方式非常有效，但可以像这样做得更多：

var lista = 'example 1'; 
$("#id option").each(function(){
    if( this.text == lista ){
      this.selected = true;
      return false;
    }
});

这使用本机属性，因此会更快。

【讨论】：

【解决方案5】：

我可能为时已晚。

var lista = 'example 1';
$('#id option[text="' + lista + '"]').attr('selected', true);

这大约快 97%

var lista = 'example 1';
$('#id option:contains("' + lista + '")').attr('selected', true);

【讨论】：

虽然第一个选择器的性能通常会更好，但性能差异的部分原因可能是[text=...] 版本不匹配任何元素，如果您的浏览器支持@987654325 @。这是因为querySelectorAll 将寻找text 属性，而option 元素没有。