如何使用 jquery 跳过选择元素中的选项标签？答案

【问题标题】：How to skip an option tag in a select element using jquery?如何使用 jquery 跳过选择元素中的选项标签？
【发布时间】：2022-10-13 21:15:06
【问题描述】：

所以我确实有这个名为getValue 的函数，它通过使用上面有字符串的variable 来检索option value。我的问题是如何跳过值为'0' 的option，而只扫描或找到另一个剩余的options。有些人可能会问，为什么不直接更改文本'Dog'?。在我的主代码中，var myText 是动态的，这意味着它可以通过单击进行更改，例如表格行。

代码：

function getValue() {
  var myText = "Dog"
  $("#animals option").filter(function() {
    return $(this).html() == myText;
  }).val();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="animals">
  <option value='0'>Dog
    <option>
      <option value='1'>Dog
        <option>
          <option value='2'>Cat
            <option>
</select>

【问题讨论】：

正如您所看到的，当我将您的代码添加到 Stack Snippet 并单击 Tidy 时，HTML 代码使用 <option>，如 </option>。这应该会导致浏览器显示空白选项...

标签： jquery

【解决方案1】：

我会坚持使用 jQuery 并使用其额外的 :contains() selector 来查找文本匹配，以及 :not() 来限制 value 匹配。

请注意，使用:contains() 意味着如果该选项存在，它将匹配“Dog”和“Weiner Dog”并且匹配第一个。

function getValue() {
  var myText = "Dog"
  return $("#animals option:contains('" + myText + "'):not([value='0'])").val();
}
console.log(getValue());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="animals">
  <option value='0'>Dog</option>
  <option value='1'>Dog</option>
  <option value='2'>Cat</option>
</select>

【讨论】：

【解决方案2】：

你可以扩展你的filter() 来检查value：

纯 JS 示例，因为you might not need jquery：

function getValue(myText = "Dog") {
    const options = [ ...document.querySelectorAll("#animals option") ];
    return options.filter((e) => {
        return e.value !== '0' && e.innerHTML === myText;
    });
}

const res = getValue();
console.log(res);

<select id = "animals">
  <option value = '0'>Dog<option>
  <option value = '1'>Dog<option>
  <option value = '2'>Cat<option>
</select>

【讨论】：

谢谢@0stone0 的回答。