时间戳

首页 > 解决方案 > 如何访问

javascript - 如何访问

问题描述

我有以下代码：
HTML

<select name="cf[source]" id="form1_source" required="" class="cf-input cf-input-shadow-1 cf-one-half ">
    <option value="notspecified" data-calc-value="notspecified">Please select</option>
    <option value="Facebook" data-calc-value="Facebook">Facebook</option>
    <option value="Flyer" data-calc-value="Flyer">Flyer</option>
    <option value="Instagram" data-calc-value="Instagram">Instagram</option>
</select>

Javascript

document.addEventListener('DOMContentLoaded', function(){
    var source = document.getElementById('form1_source');
    var ref = window.location.search;
    var IG = source[source.options.length-1];
 });

我希望能够始终访问“Instagram”选项来使用它。它目前是列表中的最后一个，因此我使用下拉列表的长度来访问它，但我不想每次在 Instagram 之前或之后向列表中添加内容时都必须更新代码。有没有办法使用诸如使用 Javascript（而不是 jQuery）之类的东西来访问<option>代码？source.options['Instagram']我无法为这些选项分配 ID，因为这些选项是使用其他软件生成的，而这些软件没有给我这样做的选项。我还试图避免循环遍历将值与我正在寻找的值进行比较的选项。

编辑：用户正在选择他们如何了解我的网站。如果他们从 IG 访问站点链接，则 URL 会附加 ?ref=IG。我希望所有其他选项都消失，因为那是他们遵循的链接。

标签： javascripthtmlforms

解决方案

您可以使用常规查询选择器。

let select  = document.getElementById('form1_source');
let options = select.querySelectorAll('option[value="Instagram"]');
console.log(options[0]);
<select name="cf[source]" id="form1_source" required="" class="cf-input cf-input-shadow-1 cf-one-half ">
    <option value="notspecified" data-calc-value="notspecified">Please select</option>
    <option value="Facebook" data-calc-value="Facebook">Facebook</option>
    <option value="Flyer" data-calc-value="Flyer">Flyer</option>
    <option value="Instagram" data-calc-value="Instagram">Instagram</option>
</select>

推荐阅读