javascript - 使用 JS 检查此场景中是否存在 html 标签

Question

HTML 部分如下所示:

<select class="ue-select-box box-model" name="metric-name">                             
  <option value="1" selected>Logins (including from CRM)</option>
  <option value="2">Listened to a Call (including from CRM)</option>
  <option value="15">Set up a New Report/Edited a Report</option>
  <cfif session.accountId NEQ 5>
     <option value="13">Staff Activity - Deactivate</option>
  </cfif>                                  
</select>

1. 第一个问题是我可以用什么来检查这个选项是否存在？我知道有一个方法 (myfile.getElementsByTagName("")) 但就我而言，我有很多标签名称为“option”的标签。
2. 如果有一种方法可以检查该选项是否存在，它是否适用于这种情况，因为我的选项位于页面上，即使仅当 session 中的 accountId 不等于 5 时才显示

提前感谢您的帮助。

Answer 1

1. First question is what can I use to check if this option exist? I know there is a method (myfile.getElementsByTagName("")) but in my case I have a lot of tags that has the tag-name "option".

您可以使用 document.querySelector 查找任何有效 CSS 选择器的第一个匹配元素。如果找到则返回元素实例，如果未找到则返回 null。例如，根据您所显示的 HTML，您可以执行以下操作:

if (document.querySelector('select[name="metric-name"] option[value="13"]')) {
    // Yes, it's there
} else {
    // No, it's not
}

2. If there is a method to check if the option exist, is it [going to] work on this scenario since my option is on the page even though is displayed only when accountId from session is not equal to 5

根据我能找到的有关 cfif 的内容，如果条件满足，选项 不会出现在浏览器中的渲染页面上真的。所以上面的方法是可行的。

不带选项的示例:

if (document.querySelector('select[name="metric-name"] option[value="13"]')) {
    console.log("Yes, it's there");
} else {
    console.log("No, it's not there");
}

<select class="ue-select-box box-model" name="metric-name">                             
  <option value="1" selected>Logins (including from CRM)</option>
  <option value="2">Listened to a Call (including from CRM)</option>
  <option value="15">Set up a New Report/Edited a Report</option>
</select>

使用选项的示例:

if (document.querySelector('select[name="metric-name"] option[value="13"]')) {
    console.log("Yes, it's there");
} else {
    console.log("No, it's not there");
}

<select class="ue-select-box box-model" name="metric-name">                             
  <option value="1" selected>Logins (including from CRM)</option>
  <option value="2">Listened to a Call (including from CRM)</option>
  <option value="15">Set up a New Report/Edited a Report</option>
  <option value="13">Staff Activity - Deactivate</option>
</select>