Question

1）如何使用选项标签中赋予它的 value 来检索单个选项的文本（无论选择哪个选项），说我选择了菠萝，但是我想稍后在程序中获得其他水果的名称（例如：我选择了菠萝，但是稍后在程序中，我想知道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来说是新的）

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>

如何使用javascript在选项标签中使用给定的值检索选项标签的文本？

4 个答案: