将选择的值从<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,此外,事件应设置为选择而不是选项以下是正确的代码

<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>

希望有帮助!