如何使用javascript使用選項標簽中賦予它的值來檢索選項標簽的文本？

Question

1）如何使用選項標簽中賦予它的值來檢索單個選項的文本（無論選擇哪個選項），假設我選擇了菠蘿，但我想在程序稍后獲取其他一些水果的名稱（例如：我選擇了菠蘿，但后來在程序中我想知道值=3 的 Option 標簽中的水果是什么，即這里的橙色），我想使用給它的值來做。 （比如說從其值 3 中檢索 Orange）是的，如果它是選定的項目，我們有很多選擇，但如果它不是當前選定的項目怎么辦？我想使用javascript來做。

2）如何使用選項標簽中賦予它的值來檢索所有元素。

3）以及如何使用給定的值（在選項標簽中）對其進行排序並將其存儲在數組中？ （意圖不是按字母順序排序，而是使用給它選項標簽的值排序，我應該能夠以 Apple、Banana、Orange、Pineapple 的順序存儲包含元素的數組）

HTML 結構

<form>Select your favorite fruit:
    <select id="mySelect">
        <option value="4">Pineapple</option>
        <option value="2">Banana</option>
        <option value="3">Orange</option>
        <option value="1">Apple</option>
    </select>
</form>

（很抱歉將許多問題放在一個地方，我是 stackoverflow 的新手）

Answer 1

function getSelectValues(selectId){
    let option = document.getElementById(selectId);

    let valEls = option.getElementsByTagName('option');

    let values = [];

    for (var i = 0; i < valEls.length ; i++) {
        values.push(
            {
                name: valEls[i].getAttribute('name'),
                value : valEls[i].innerHTML
            }
        );
    }
    return values;
}

也對選擇進行排序，這里給出了答案： Javascript to sort contents of select element

Answer 2

您通過其 id 獲取元素並處理所選選項：

var sel = document.getElementById('mySelect');

var opt = sel.options[sel.selectedIndex];

console.log(opt.value);

console.log(opt.text);

Answer 3

Sp 你要求了很多東西

您可以只收集UI ，然后將其推送到一個數組，然后隨心所欲地使用它

 let optionsUI = document.getElementsByTagName("option") let options = [] for(let i=0; i < optionsUI.length ;i++){ options.push({ "name": optionsUI.item(i).textContent, "value": optionsUI.item(i).value }) } options.sort(function(a,b){ if (b.name < a.name){ return 1 } return -1 }) console.log(options)

 <form>Select your favorite fruit: <select id="mySelect"> <option value="4">Pineapple</option> <option value="2">Banana</option> <option value="3">Orange</option> <option value="1">Apple</option> </select> </form>

Answer 4

只需對選項列表進行排序並遍歷它並獲取所有內部文本

 let a = document.getElementsByTagName('option'); var value = []; function sortList(a) { //sort the list of options for (i = 0; i < (a.length - 1); i++) { for (j = i + 1; j < (a.length); j++) { if (a[i].value > a[j].value) { a[i].parentNode.insertBefore(a[j], a[i]); } } } for (k = 0; k < a.length; k++) { value.push(a[k].innerHTML); } } sortList(a); console.log(value);

 <form>Select your favorite fruit: <select id="mySelect"> <option value="4">Pineapple</option> <option value="2">Banana</option> <option value="3">Orange</option> <option value="1">Apple</option> </select> </form>