问问题
31309 次
4 回答
9
您应该使用onchangeevent 而不是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>
希望有帮助！
于 2013-08-05T10:36:40.860 回答
0
您可以通过在“select”元素对象上使用“value”方法来获取选定的值。对于下面的 html，您可以通过 document.getElementById("color").value 获取选择标签的值
<body>
<select id="color">
<option value="red">red</option>
<option 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>
</body>
以下是我编写 js 的方式：
<script>
window.addEventListener("load", function() {
document.getElementById("color").addEventListener("change", function() {
var selectElem = document.getElementById("color");
document.getElementById("red").style.display = "none";
document.getElementById("blue").style.display = "none";
document.getElementById(selectElem.value).style.display = "block";
})
})
</script>
提示：始终尝试实现 DRY（不要重复您的代码）代码。
上面的代码在 IE8 或更低版本中不起作用。IE8 及以下浏览器支持 attachEvent() 方法。我们可以创建自己的自定义事件处理程序方法，该方法适用于跨浏览器。
function addHandler(element, type, handler) {
alert("Hi");
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, handler)
} else {
element["on"+type] = handler };
}
addHandler(window, "load", main)
function main() {
function handler() {
var selectElem = document.getElementById("color");
document.getElementById("red").style.display = "none";
document.getElementById("blue").style.display = "none";
document.getElementById(selectElem.value).style.display = "block";
}
addHandler(document.getElementById("color"), "change", handler);
}
我创建了一个自定义 addHandler() 函数，该函数适用于所有 IE、chrome、firefox、opera 和 safari。
于 2013-08-05T12:36:47.123 回答
0
<select onchange="color(event)">
<option name="choice1" value="red" >red</option>
<option name="choice2" value="blue" >blue</option>
</select>
function color(e){
var color=e.target.options[e.target.selectedIndex].value;
var blueDiv=document.getElementById('blue');
var redDiv=document.getElementById('red');
switch(color){
case 'blue':
blueDiv.style.display = 'block';
redDiv.style.display = 'none';
break;
case 'red':
redDiv.style.display = 'block';
blueDiv.style.display = 'none';
break;
default:
redDiv.style.display = 'none';
blueDiv.style.display = 'none';
break;
}
}
于 2013-08-05T10:44:31.803 回答
-1
在您的选择而不是选项上设置处理程序：
<select ... onclick="color(this.value)" >...
于 2013-08-05T10:36:03.860 回答