HTML5： select标签

最新推荐文章于 2024-09-10 13:54:44 发布

原创最新推荐文章于 2024-09-10 13:54:44 发布 · 5.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

本文详细解读HTML5 select元素的使用，包括name和id属性的作用，option标签中value和内容的关系，以及如何获取并设置默认选中项。通过实例演示了如何读取并打印选中的value。

HTML5： select标签

select标签作为一个HTML的双标签，存在两个常用的属性

name属性：表示select标签的名字

id属性：表示select标签的id，也可以作为label 标签链接的组件

用法为：

其选择项option标签中的value值表示的是select标签选中后的value值，option标签中的内容表示显示的内容
select标签初始值为默认选中第一项

 <select name="color">
        <option value="red">红</option>
        <option value="blue">蓝</option>
        <option value="green">绿</option>
 </select>

<script>
    let select = document.querySelector("select").value;
    console.log(select);  // red 
</script>