如何使用 JavaScript 创建一个完美的选择框 [重复]答案

【问题标题】：How can I create a perfect select box using JavaScript [duplicate]如何使用 JavaScript 创建一个完美的选择框 [重复]
【发布时间】：2020-09-06 09:03:54
【问题描述】：

我想制作一个带有选择框的 HTML 文件。

首先，一切正常：

<!DOCTYPE html>
<html>
<body>
  <select id="options">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

因此，这段代码创建了一个带有 2 个选项的选择框：

选项 1

选项 2

现在我想使用 JavaScript 检查选择了哪个选项。而且我不知道该怎么做。

<!DOCTYPE html>
<html>
<body>
  <select id="options">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
  <script>
    //What here?
  </script>
</body>
</html>

所以这是代码的结构：

有两种选择：

如果用户选择选项 1，JavaScript 将执行命令 1。

如果用户选择选项 2，JavaScript 将执行命令 2。

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/questions/1085801/…

标签： javascript html select options

【解决方案1】：

首先，你必须有结束选项标签</option>。然后将一个事件附加到选择框（onClick、onChange）并调用一个函数。

<select id="choose-lang" onChange ="ourFunction()">

在函数中，

function ourFunction(){
    var e = document.getElementById("choose-lang");
    var selectedOptionText = e.options[e.selectedIndex].text;
    console.log(selectedOptionText)
}

如果你想打印价值，

function ourFunction(){
    var e = document.getElementById("choose-lang");
    var selectedOptionValue = e.options[e.selectedIndex].value;
    console.log(selectedOptionValue)
}

【讨论】：

所以选择的选项在变量selectedOptionValue或selectedOptionText?
例如，在的情况下， selectedOptionValue 将包含 1， selectedOptionText 将包含“Option 2”。
也就是说，如果我有 100 个选择选项，我需要 100 个函数？
但无论如何我都改变了，那现在呢？
我只需要 1 个函数还是 2 个函数？

【解决方案2】：

您可以将此代码用于任何 dom 事件，例如 onChange，并且您还需要选择选项文本，您可以替换该行 var strUser = e.options[e.selectedIndex].text;

function getLangValue(){
var e = document.getElementById("choose-lang")
var strUser = e.options[e.selectedIndex].value;
console.log(strUser)
}

<select id="choose-lang" onChange=getLangValue()>
  <option value="1">Option 2</option>
  <option value="2">Option 1</option>
  </select>

【讨论】：

非常感谢。这是我第一次看到代码 sn-p 工作。哈哈。但我只看到它console.log 一次。如果我改变它，它不会记录它。您将如何更改它以便在更改时将value 记录到控制台？
code sn-p 处理一个准备好的事件，这就是为什么你总是得到第一个选项。您需要在代码中使用像 Onchange Onclick 这样的 dom 事件。
我刚刚用onChange Dom 事件更新了 sn-p，现在它工作正常，您可以通过更改下拉菜单获得更新值
谢谢有人已经发布了，但还是谢谢 =)