HTML select 标签下拉复选

最新推荐文章于 2025-06-19 03:39:14 发布

CJ点

最新推荐文章于 2025-06-19 03:39:14 发布

阅读量2.9k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JS slelect 标签

本文链接：https://blog.youkuaiyun.com/qq_37203082/article/details/79844892

前端专栏收录该内容

12 篇文章

订阅专栏

存于世，必要拯救世界，希望的灯光也需要积累。
记之已身，学以致用，欢迎转载，更多联系QQ:289325414

通过JS和CS 使select标签可以多选，前提需要加载JS和CSS，以及JQ。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/sumoselect.css">
    <script type="text/javascript" src="JS/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="JS/jquery.sumoselect.js"></script>

</head>
<body>

<select multiple="multiple" onchange="console.log('changed', this)" placeholder="请选择角度" class="SlectBox" required>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
</select>

</body>
<script>
    $(function () {
        window.asd = $('.SlectBox').SumoSelect({
            csvDispCount: 5, selectAll:true, captionFormatAllSelected: "全部选择"
        });
    })

//    获取选中的字段
    var positionRankSelectSpilt = "";
    var list=[];
    $(".SlectBox  option:selected").each(function(){
        list.push($(this).val())
        positionRankSelectSpilt += $(this).val()+ ",";
    });
    //职级的多选去掉最后一个逗号
    positionRankSelectSpilt = positionRankSelectSpilt.substring(0,positionRankSelectSpilt.length -1);
    alert("选中的:"+positionRankSelectSpilt);
    console.log("list:"+list)
</script>
</html>

资源JS：https://download.youkuaiyun.com/download/qq_37203082/10332155