如何使用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>