包含项目组的下拉列表 select-optgroup-option

最新推荐文章于 2025-03-04 09:40:44 发布

不知-_

最新推荐文章于 2025-03-04 09:40:44 发布

阅读量295

点赞数

分类专栏：前端零零散散文章标签： html

本文链接：https://blog.csdn.net/http____/article/details/122018697

版权

前端零零散散专栏收录该内容

27 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select</title>
</head>


<body>
    <select name="" id="">

        <option value="">nothing</option>

        <optgroup label="梨">
            <option value="">香梨</option>
            <option value="">雪梨</option>
        </optgroup>
        
        <optgroup label="葡萄">
            <option value="" title="brilliant choice!">巨峰葡萄</option>
            <option value="">野葡萄</option>
            <option value="">提子</option>
        </optgroup>

    </select>
</body>
</html>

效果图：
在这里插入图片描述

select显示一个下拉列表，option是下拉列表中的项目(item)，而option的文本内容(text content)是下拉列表项目中显示到页面上的值，value是真正需要提交到服务端的值。
这个下拉列表包含一个“项目组”(item group)，这个组是无法选择的，使用label标签标记字面内容，真正起作用的，还是value属性。
option中的参数：title
如果需要在鼠标放到某个项目上时，给出提示，可以使用title属性