javascript - 将所选值从 <select> HTML 标记传递到 JAVASCRIPT

Question

如何获取 <select> 的值在我的 html 中标记并将其传递到我的 javascript。

当我选择 red 时它应该显示我的 <div id="red"> 我是 JS 的新手，所以我不确定我的语法是否正确。

HTML

<select>
<option name="choice1" value="red" onclick="color(this.value)">red</option>
<option name="choice2" value="blue" onclick="color(this.value)">blue</option>
</select>

<div id="red" style="display:none;">
<p>You want RED</p>
</div>

<div id="blue" style="display:none;">
<p>You want BLUE</p>
</div>

JavaScript

function color(color_type){
if (color_type == 'blue'){
document.getElementById('blue').style.display = 'block';
document.getElementById('red').style.display = 'none';
} 
else{
document.getElementById('blue').style.display = 'none';
document.getElementById('red').style.display = 'block';
}
}

Answer 1

你应该使用onchange事件而不是onclick，此外，事件应该设置为select而不是option 以下是正确的代码

<script>
function color(color_type){
    if (color_type == 'blue'){
        document.getElementById('blue').style.display = 'block';
        document.getElementById('red').style.display = 'none';
    } 
    else{
        document.getElementById('blue').style.display = 'none';
        document.getElementById('red').style.display = 'block';
    }
}
</script>

<select onchange="color(this.value)">
    <option name="choice1" value="red" >red</option>
    <option name="choice2" value="blue" >blue</option>
</select>

<div id="red" style="display:none;">
    <p>You want RED</p>
</div>

<div id="blue" style="display:none;">
    <p>You want BLUE</p>
</div>

希望有帮助!