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

问题描述 投票:0回答:2

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

所以首先,一切都很正常。

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

所以,这段代码做了一个有两个选项的选择框。

选项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。

javascript html select options
2个回答
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)
}

1
投票

你可以使用这段代码来处理任何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>
© www.soinside.com 2019 - 2024. All rights reserved.