[英]Finding which <Option> is selected in <select> (without JQuery)
我有以下元素:
<select id="color" name="colorId" class="btn secondary">
<option value="347366" selected="selected">Purple</option>
<option value="56634">White</option>
</select>
我想找到選擇了哪個選項:
下面只給我默認值:
document.querySelector('#color option[selected="selected"]')
(我知道如何使用 JQuery 但我不能使用 jQuery 或任何其他類似的庫)
使用 :checked 選擇器。 這適用於復選框、單選和選擇
document.querySelector('#color option:checked')
對於節點
document.querySelector('#color option:checked').value
對於價值
在普通的javascript中:
var select = document.getElementById('color');
var currentOpt = select.options[select.selectedIndex];
JsBin 示例: http ://jsbin.com/ogunet/1/edit(打開你的 js 控制台)
這將返回選定的選項值和文本。希望這對你有用..
干杯
var elt = document.getElementById('color');
// get option selected
var option = elt.options[elt.selectedIndex].value;
var optionText = elt.options[elt.selectedIndex].text;
使用getElementById()
獲取<select>
DOM元素並獲取其參數selectedIndex
:
var select = document.getElementById( 'color' ),
selIndex = select.selectedIndex;,
selElement = select.getElementsByTagName( 'option' )[ selIndex ];
您可以使用querySelectorAll
而不是querySelector
document.querySelectorAll('option:checked')[0].innerText
要么
document.querySelectorAll('option:checked')[0].value
selectedOptions在希望從 select 元素中取回所選選項時是一個有效選項
文檔中的演示:
let orderButton = document.getElementById("order"); let itemList = document.getElementById("foods"); let outputBox = document.getElementById("output"); orderButton.addEventListener("click", function() { let collection = itemList.selectedOptions; // <-- used here let output = ""; for (let i=0; i<collection.length; i++) { if (output === "") { output = "Your order for the following items has been placed: "; } output += collection[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { output += " and "; } else if (i < (collection.length - 2)) { output += ", "; } else if (i === (collection.length - 2)) { output += ", and "; } } if (output === "") { output = "You didn't order anything!"; } outputBox.innerHTML = output; }, false);
<label for="foods">What do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">Burrito</option> <option value="2">Cheeseburger</option> <option value="3">Double Bacon Burger Supreme</option> <option value="4">Pepperoni Pizza</option> <option value="5">Taco</option> </select> <br> <button name="order" id="order"> Order Now </button> <p id="output"> </p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.