实现带复选框的下拉列表

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

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

html代码如下

    

        
中国
        
英国
        
美国
        
韩国
    
    确定

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)
    })

最后的效果如图：

初始化的效果

点击下拉列表后的效果

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

去除一些选项后的效果