我想制作一个带有选择框的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。
首先,你必须要有关闭选项标签 </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)
}
你可以使用这段代码来处理任何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>