有个问题没弄明白

有个问题没弄明白

<!DOCTYPE html>
<html lang="en">
<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=f;
       function f() {
           var d=document.getElementsByTagName('div')[1];
           var a=document.getElementById('color');
           a.onchange=function () {
               var b=this.value;
               if(b!=0){
                   d.innerHTML='我的背景颜色变成了'+b+'色';
                   d.style.backgroundColor=b;
               }
               else {
                   d.innerHTML='我的背景颜色没有任何变化';
                   d.style.backgroundColor='#fff';
               }
           }
       }
   </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>

老师请先帮忙看看代码实现得还有需要改进的吗? 然后想问下关于b取值的第二种方法var b=a.options[a.selectedIndex].value,其中[a.selectedIndex]为什么能够表示的是数组的索引的呢


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,解答如下:

(1)option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。

(2)selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

所以通过a.options[a.selectedIndex]就可以取到点击的那一个下拉框的索引:

http://img1.sycdn.imooc.com//climg/5e6de6e7096d764001020060.jpg

http://img1.sycdn.imooc.com//climg/5e6de6ef0979610000750057.jpg

同学再理解一下,祝学习愉快~

好帮手慕粉 2020-03-14 16:52:45

同学你好,关于同学的问题回答如下:

1、代码实现的是正确的。

2、老师不太明白同学说的var b=a.options[a.selectedIndex].value这一段是什么意思呢,建议同学再详细描述一下,或者将具体代码粘贴上来呢。

祝学习愉快~

  • 提问者 慕仙0287733 #1
    就是代码var b=this.value是等价于var b=a.options[a.selectedIndex].value的,没弄明白a.options[a.selectedIndex]为什么可以取到相应的DOM元素.
    2020-03-15 11:52:51
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师