关于value值
来源：3-12 编程练习
慕莱坞1501479
2019-09-19 21:15:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange()</title>
<style type="text/css">
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
<script type="text/javascript">
//补充代码
window.onload=win;
function win(){
var col=document.getElementById("color");
var div1=document.getElementById("div");
function a(){
var bgcol=col.value;
/*col.options[col.selectedIndex].value;*/
console.log(bgcol);
if(bgcol=="0") {
div1.style.backgroundColor="white";
div1.innerHTML="我没有发生任何变化";
}else{div1.style.backgroundColor=bgcol;
div1.innerHTML="我的背景颜色变成了"+bgcol+"色";
}
}
col.onchange=a;
}
</script>
</head>
<body>
<div>
<span>请选择您喜欢的颜色:</span>
<select id="color">
<option value="0">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div">我是div</div>
</body>
</html>
老师，图片中我发现这样写也能实现效果，但是col是select的dom对象，而value值不是option才有的吗，为什么这样写也行呢？
1回答
-
好帮手慕糖
2019-09-20
同学你好， 这个是规定哦。
简单理解就是select标签上没有value值，通过value获取的就是当前显示的opation标签的value值；
onchange事件表示在元素值发生改变的时候触发的事件。给select绑定onchange事件后，下拉框发生改变的时候就会触发该事件。 this.value 获取的就是选中的option的value值。
如果帮助到了你， 欢迎采纳！
祝学习愉快！
0
相似问题