javascript - 带有 contains() 的 jquery 多个选择器

Question

我在一个和一个额外的属性中有很多<option>s叫做<select>zip

<SELECT id="city">
  <OPTION zip="AUC 1291 100005" value="1">City 1</OPTION>
  <OPTION zip=" 1295 100006" value="2">City 2</OPTION>
  <OPTION zip=" 1299 100008" value="3">City 3</OPTION>
</SELECT>

现在我想选择 Text 或 ZIP 包含字符串值的选项，但以下代码不起作用。

var val = '1291'; //Zip code
var x = $('#city option:contains('+val+'), #city zip:contains('+val+')').val();

为什么？

Answer 1

如果要选择具有属性的元素，taht 值包含请求的字符串，则必须使用：

  var val = '1291'; //Zip code
  var x = $('#city option[zip*="' + val + '"]').val();

如前所述：http ://api.jquery.com/attribute-contains-selector/

但正如人们所说，更好的方法是使用 HTML5data-zip属性而不是zip

（只是前缀data-）。

在这种情况下，您的选择器将是：

  var x = $('#city option[data-zip*="' + val + '"]').val();

希望它有所帮助。

Answer 2

contains检查内部元素而不是属性，您应该使用以下内容：

$('#city option').filter(function(){
    return this.innerHTML.indexOf(val) > -1 || 
           $(this).attr('zip').indexOf(val) > -1;
});

请注意，这zip不是一个有效的 HTML 属性，最好使用它data-zip。

$('#city option').filter(function(){
    return this.innerHTML.indexOf(val) > -1 || 
           $(this).data('zip').indexOf(val) > -1;
});

Answer 3

这是我的问题的答案。测试和工作:)

var x = $('#city option:contains('+val+'), #city [data-zip*='+val+']').val();