我有以下代碼：
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 之前或之后向串列添加內容時都必須更新代碼。有沒有辦法<option>使用諸如source.options['Instagram']使用 Javascript（而不是 jQuery）之類的東西來訪問代碼？我無法為選項分配 id，因為這些選項是使用其他軟體生成的，這些軟體不給我提供這樣做的選項。我還試圖避免回圈選擇將值與我要查找的值進行比較的選項。
編輯：用戶正在選擇他們如何聽說我的網站。如果他們從 IG 訪問站點鏈接，則 URL 會附加 ?ref=IG。我希望所有其他選項都消失，因為這是他們遵循的鏈接。
uj5u.com熱心網友回復：
您可以使用常規查詢選擇器。
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>uj5u.com熱心網友回復：
我想要求澄清（我會添加評論，但目前沒有足夠的代表）。
用戶選擇一個選項，因此，您為什么要獲取已經存在的值？
我希望正確的方法是假設您不知道用戶選擇了什么，而不是針對一個選項進行任何操作。
<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>
<p id="feedback">
</p>
<script>
var source = document.getElementById('form1_source');
source.addEventListener("change",function(event_object){
var feedback = document.getElementById("feedback");
feedback.innerHTML = event_object.target.value;
})
</script>
請檢查此小提琴：https : //jsfiddle.net/hyurxtnz/3/并使用其他資訊更新您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/327200.html
標籤：javascript html 形式
上一篇：錯誤提交|姜戈