select中的两个属性——selectedIndex、selectedOptions

最新推荐文章于 2022-12-28 09:33:41 发布

mingli_2020

最新推荐文章于 2022-12-28 09:33:41 发布

阅读量3.5k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46730138/article/details/110143678

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

`selectedIndex`与`selectedOptions`

这两个属性是在onchange事件函数中被激发的属性，在select下的子节点中点击哪一个，就会被赋值哪一个
selectedIndex是点击后获得的下标
selectedOptions是点击后获得的HTMLCollection并且只有一个元素，因此要获得点击的option就需要selectedOptions[0]

<body>
    <select name="" id="sel">
        <option value="">打球</option>
        <option value="">唱歌</option>
        <option value="">看书</option>
    </select>

    <script>
        var sel = document.getElementById("sel")
        sel.addEventListener("change", function() {
            var selectedOptions = this.selectedOptions[0].innerText;
            console.log(selectedOptions);
         
            var selectedIndex = this.selectedIndex 
            console.log(selectedIndex);
          
        })
        
    </script>
</body>

mingli_2020

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
select中的两个属性——selectedIndex、selectedOptions

selectedIndex与selectedOptions这两个属性是在onchange事件函数中被激发的属性，在select下的子节点中点击哪一个，就会被赋值哪一个selectedIndex是点击后获得的下标selectedOptions是点击后获得的HTMLCollection并且只有一个元素，因此要获得点击的option就需要selectedOptions[0]<body> <select name="" id="sel"> <op
复制链接

扫一扫