如何使用原生JavaScript通过value属性访问select下指定的<option>元素

原生JavaScript可以通过querySelector结合属性选择器直接精准定位到对应value的option元素，完全符合你「不依赖选项位置、不需要遍历、不需要额外加id、不使用jQuery」的要求，是最接近你想要的source.options['Instagram']效果的实现方式。

核心取值代码 #

// 直接获取value为Instagram的option元素，不受选项顺序变动影响
const igOption = document.querySelector('#form1_source option[value="Instagram"]');

完整实现（含IG跳转判断逻辑） #

针对你补充的「IG跳转时隐藏其他选项」的需求，完整代码如下：

document.addEventListener('DOMContentLoaded', function(){
    const sourceSelect = document.getElementById('form1_source');
    // 解析URL参数判断是否为IG跳转
    const urlParams = new URLSearchParams(window.location.search);
    const isIGReferrer = urlParams.get('ref') === 'IG';

    if (isIGReferrer) {
        const igOption = document.querySelector('#form1_source option[value="Instagram"]');
        // 清空下拉框，仅保留Instagram选项
        sourceSelect.innerHTML = '';
        sourceSelect.appendChild(igOption);
        // 自动选中该选项
        igOption.selected = true;
    }
});

方案说明 #

• 原生HTMLSelectElement.options集合仅支持通过下标、option的id属性、option的name属性索引，无法直接通过value值访问，因此属性选择器+querySelector是最优实现
• 选择器匹配由浏览器底层实现，性能优于手动遍历选项对比值
• 后续新增其他渠道选项时，不需要修改当前代码逻辑

内容的提问来源于stack exchange，提问作者Kristi Perkins