实现带复选框的下拉列表

最近在项目中有遇到需要带复选框的下拉列表，找了好久都没找到相关资料，只好自己用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)
    })

最后的效果如图：

初始化的效果

实现带复选框的下拉列表

点击下拉列表后的效果

实现带复选框的下拉列表

选中一些选项后点击确定的效果

实现带复选框的下拉列表

去除一些选项后的效果

实现带复选框的下拉列表

秒客网

实现带复选框的下拉列表

相关文章