时间戳

首页 > 解决方案 > 如何使用 javascript 使用选项标签中赋予它的值来检索选项标签的文本？

javascript - 如何使用 javascript 使用选项标签中赋予它的值来检索选项标签的文本？

问题描述

1）如何使用选项标签中给定的值检索单个选项的文本（无论选择哪个选项），假设我选择了菠萝，但我想稍后在程序中获取其他水果的名称（例如：我选择了 Pineapple，但稍后在程序中我想知道 Option 标记中 value=3 的水果是什么，即此处的橙色），我想使用赋予它的值来做到这一点。（比如说从它的值 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的新手）

标签： javascripthtml

解决方案

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

推荐阅读