使用包含方法的选项文本下拉获取选项值 jquery 返回错误值答案

【问题标题】：dropdown get option value using option text using contains method jquery returns wrong value使用包含方法的选项文本下拉获取选项值 jquery 返回错误值
【发布时间】：2017-03-22 22:30:23
【问题描述】：

我有一个下拉菜单如下：

<select id="lang" >
       <option value="1">php</option>
       <option value="2">java j2ee</option>
        <option value="3">asp</option>
       <option value="4">java</option>
  </select>

我正在做的是尝试使用选项文本获取选项值，如下所示；

假设 java 是选项文本，所以我尝试如下：

var a = $('#lang option:contains("java")').val();

但我将选项值设为 2 而不是 4（这是正确且预期的）

我错了，因为我正在尝试方法contains。请指导我如何获得确切的价值？

FIDDLE

【问题讨论】：

JQuery :contains() 与 .indexOf() 相同，如果您使用 .each()，您将获得 2,4

标签： jquery option dropdown

【解决方案1】：

使用.filter() 的示例。

alert($('#lang option').filter(function(){return $(this).text() == 'java' }).val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="lang">
  <option value="1">php</option>
  <option value="2">java j2ee</option>
  <option value="3">asp</option>
  <option value="4">java</option>
</select>

【讨论】：

【解决方案2】：

您可以使用.html()查看内容：

$('#lang option').each(function() {
  if ($(this).html() == 'java') {
    alert($(this).val());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="lang">
  <option value="1">php</option>
  <option value="2">java j2ee</option>
  <option value="3">asp</option>
  <option value="4">java</option>
</select>

【讨论】：

也可以使用text()查看。

【解决方案3】：

如果要选择具有精确文本的元素，请使用正则表达式

var regex = new RegExp("^java$");
var a = $('#lang option').filter(function () {
    return regex.test($(this).text()); 
}).val();
alert(a);

【讨论】：