检查这个场景中是否存在使用JS的html标签 [英] Checking if a html tag exist on this scenario using JS

问题描述

HTML部分看起来像这样：

 < select class =ue-select-box box-modelname = 度量名称 > 
< option value =1selected>登录（包括来自CRM）< / option> 
< option value =2>收听电话（包括来自CRM）< / option> 
< option value =15>设置新报告/编辑报告< / option> 
< cfif session.accountId NEQ 5> 
< option value =13>员工活动 - 取消激活< / option> 
< / cfif> 
< / select> 
  

1. 第一个问题是我可以用来检查这个选项是否存在？我知道有一个方法（myfile.getElementsByTagName（）），但在我的情况下，我有很多具有标签名称选项的标签。


2. 如果有一种方法来检查选项是否存在，它是否会在这种情况下工作，因为我的选项在页面上，即使仅在会话的accountId不等于5

预先感谢您的帮助。

解决方案

1。第一个问题是我可以用什么来检查这个选项是否存在？我知道有一个方法（myfile.getElementsByTagName（）），但在我的情况下，我有很多标签的标签名称为option。

您可以使用 document.querySelector 为任何有效的CSS选择器查找第一个匹配元素。如果找到，它将返回元素实例，如果未找到，则返回 null 。例如，从你展示的HTML中，你可以这样做：

  if（document.querySelector（'选择[name =metric-name]选项[value =13]'））{
 //是的，它在那里
} else {
 //不，它不是
} 
  

2。如果有一种方法来检查选项是否存在，它是否[将]在这种情况下工作，因为我的选项在页面上，即使仅在会话的accountId不等于5时显示

根据我可以找到的有关 cfif ，选项 不会在浏览器中呈现的页面上。因此，上面的方法是有效的。

没有选项的示例：

$ b $

< select class =ue-select-box box-modelname =metric-name> <选项值=1选择>登录（包括来自CRM）< / option> < option value =2>收听电话（包括来自CRM）< / option> < option value =15>设置新报表/编辑报表< / option>< / select>

示例带 选项：

< select class =ue-select-box box-modelname =metric-name> <选项值=1选择>登录（包括来自CRM）< / option> < option value =2>收听电话（包括来自CRM）< / option> < option value =15>设置新报告/编辑报告< / option> < option value =13>员工活动 - 取消激活< / option>< / select>

b $ b

The HTML part looks like this:

<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. 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".
2. If there is a method to check if the option exist, is it gonna 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

Thank you in advance for the help.

解决方案

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".

You can use document.querySelector to find the first matching element for any valid CSS selector. It returns the element instance if found, or null if not found. So for instance, from what you've shown of your HTML, you could do this:

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

According to what I can find about cfif, the option won't be on the rendered page in the browser if that condition is true. So the above would work.

Example without the option:

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>

Example with the option:

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>

这篇关于检查这个场景中是否存在使用JS的html标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！