实现带复选框的下拉列表

最新推荐文章于 2019-08-05 22:00:04 发布

guxin_duyin

最新推荐文章于 2019-08-05 22:00:04 发布

阅读量3.2w

点赞数 2

分类专栏： HTML+CSS 原生JS

本文链接：https://blog.csdn.net/guxin_duyin/article/details/70194176

版权

原生JS 同时被 2 个专栏收录

30 篇文章 3 订阅

订阅专栏

HTML+CSS

17 篇文章 0 订阅

订阅专栏

最近在项目中有遇到需要带复选框的下拉列表，找了好久都没找到相关资料，只好自己用jQuery+css实现了一个简单的小demo，虽然有点丑，但效果基本实现了，大家将就着看吧。

注:(以下代码为本人自己编写,只是一个小Demo,可以直接复制使用,但代码只是演示其效果和功能,告诉大家如何去写,所以界面可能没大家想要的那么漂亮!敬请谅解!0.0.)

html代码如下

<body>
<select id="box"></select>
<div id="selectBox">
    <ul>
        <li><input type="checkbox" value="中国">中国</li>
        <li><input type="checkbox" value="英国">英国</li>
        <li><input type="checkbox" value="美国">美国</li>
        <li><input type="checkbox" value="韩国">韩国</li>
    </ul>
    <button value="5">确定</button>
</div>
</body>

css代码如下

 * {
            padding: 0;
            margin: 0
        }

        #box {
            width: 100px;
            height: 20px;
            position: relative;
            top: 30px;
            left: 30px;
        }

        #selectBox {
            position: absolute;
            left: 30px;
            top: 60px;
        }

        ul {
            list-style: none;
        }

html和css代码很简单，应该都能看懂，关键是js代码

var arr = [];//定义一个数组用来接收多选框的值
    //初始化让下拉列表不显示
    $(function () {
        $('#selectBox').hide();
    })
    //单击下拉列表时显示/隐藏下拉列表
    $('#box').click(function () {
        $('#selectBox').toggle();
    })
    //监听checkbox的value值 改变则执行下列操作
    $("input").change(function () {
        if ($(this).prop("checked")) {
            arr.push($(this).val());//将选中的选项添加到数组中
        } else {
            var index = getIndex(arr, $(this).val())//找到没有选中的选项在数组中的索引
            arr.splice(index, 1);//在数组中删除该选项
        }
    })
    //这个函数用于获取指定值在数组中的索引
    function getIndex(arr, value) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == value) {
                return i
            }
        }
    }
    //点击按钮是弹出数组
    $('button').click(function () {
        alert(arr)
    })

最后的效果如图：

初始化的效果