![](/img/trans.png)
[英]How do I generate an incrementing list of most appearing values from the selected item options?
[英]How do I create a list of the selected options from a dropdwon
我正在嘗試遍歷多個 select 下拉列表,並將所有選定的選項添加到逗號分隔的列表中。
我的下拉代碼是:
<select name="testnameID" id="testnameID" multiple>
<option value="1">Test number 1</option>
<option value="2">Test number 2</option>
<option value="3">Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
在我的標簽中,我使用以下內容,但認為可以簡化或改進:
var testnameID = $('#testnameID').val();
var testnameText;
Array.from(document.querySelector("#testnameID").options).forEach(function(option_element) {
let option_text = option_element.text;
let is_option_selected = option_element.selected;
if (is_option_selected===true){
testnameText = testnameText + option_text +", ";
console.log("TestnameText: "+testnameText);
console.log("\n\r");
}
});
我需要生成一個變量 testnameText,如果選擇了前三個項目,它將返回一個值“測試編號 1,測試編號 2,測試編號 3”
我把自己弄糊塗了!
您可以嘗試使用Document.querySelectorAll()
來定位所有選定的選項,如下所示:
Array.from(document.querySelectorAll("#testnameID option:checked")).forEach(function(option_element) { let option_text = option_element.text; var testnameText = option_text +", "; console.log("TestnameText: "+testnameText); console.log("\n\r"); });
<select name="testnameID" id="testnameID" multiple> <option value="1" selected>Test number 1</option> <option value="2" selected>Test number 2</option> <option value="3" selected>Test number 3</option> <option value="4">Test number 4</option> <option value="5">Test number 5</option> <select>
您也可以嘗試使用更短的Array.prototype.map()
和Arrow function expressions
。
以下示例創建一個包含選定選項的數組:
var checkedOptions = Array.from(document.querySelectorAll("#testnameID option:checked")); var res = checkedOptions.map(option_element => ("TestnameText: "+option_element.text)); console.log(res);
<select name="testnameID" id="testnameID" multiple> <option value="1" selected>Test number 1</option> <option value="2" selected>Test number 2</option> <option value="3" selected>Test number 3</option> <option value="4">Test number 4</option> <option value="5">Test number 5</option> <select>
在這種情況下,jquery 的each()可以提供幫助。 所以獲得選定的選項非常簡單:
$('#testnameID:selected').each(function (index, el) { console.log("TestnameText: " + $(el).text()); });
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <select name="testnameID" id="testnameID" multiple> <option value="1" selected>Test number 1</option> <option value="2" selected>Test number 2</option> <option value="3" selected>Test number 3</option> <option value="4">Test number 4</option> <option value="5">Test number 5</option> </select>
selectedOptions
包含 select 元素的所有選定選項。 你可以像這樣使用它:
const select = document.querySelector('select'); select.addEventListener('change', e => { // Option texts as an array const texts = Array.from(e.target.selectedOptions).map(({text}) => text); // Option texts as a comma-separated string const textsStr = texts.join(', '); console.log(texts); console.log(textsStr); });
<select multiple> <option value="1">Test number 1</option> <option value="2">Test number 2</option> <option value="3">Test number 3</option> <option value="4">Test number 4</option> <option value="5">Test number 5</option> </select>
這也適用於事件之外,只需直接引用 select 元素而不是e.target
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.