如何使用 JavaScript 创建一个完美的 select 框

Question

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

首先，一切正常：

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

因此，这段代码制作了一个 select 框，其中包含 2 个选项：

选项 1

选项 2

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

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

所以这是代码的结构：

有2个选项：

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

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

Answer 1

首先，你必须有结束选项标签</option>。然后将一个事件附加到 select 框（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)
}

Answer 2

您可以在任何 dom 事件中使用此代码，例如 onChange 并且您还需要 select 选项文本，您可以只替换该行 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>

如何使用 JavaScript 创建一个完美的 select 框

How can I create a perfect select box using JavaScript

javascript

html

select

options