html和javascrip实现下拉菜单

最新推荐文章于 2021-06-04 19:37:50 发布

柳宁依

最新推荐文章于 2021-06-04 19:37:50 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

分类专栏： html javascript

本文链接：https://blog.youkuaiyun.com/weixin_36339245/article/details/92787632

html 同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

博客介绍了下拉菜单的相关操作，包括使用selected属性默认选中第一项，用getElementById方法获取下拉菜单对象，为下拉菜单绑定onchange事件，通过菜单对象的options属性获取所有选项元素，以及用selectedIndex属性得到选中项索引值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <form action="">
       <select name="week" id="week" onchange="change()">
           <option value="1" selected="selected">星期一</option>
           <option value="2">星期二</option>
           <option value="3" >星期三</option>
           <option value="4">星期四</option>
           <option value="5">星期五</option>
       </select>
    </form>

    <script>
     let getEl=(id)=>{
         return document.getElementById(id)
     }
     let el=getEl("week")
     let change=()=>{
         let selected=el.options[el.selectedIndex]
        console.log("选中的value值和text",selected.value,selected.innerHTML)
     }
    </script>
</body>

1、使用selected属性默认选中第一项

2、getElementById方法获取下拉菜单对象

3、下拉菜单绑定onchange事件

4、菜单对象的options属性获取所有的菜单选项元素

5、菜单对象的selectedIndex属性得到菜单选中项的索引值（从0开始）