CheckBoxDropList,多选框下拉列表

还是代码存档，这个代码中无意中知道了 attr()和prop()的区别，哎，之前用的少没发现。。。

1.效果图                                                                                  

2.css代码                                                                                

.dyw_checkboxdownlist
{
    position: absolute;
    display: none;
    z-index: 1000;
    margin-top: 5px;
    border: 1px solid black;
    background-color: White;
}

.dyw_checkboxdownlist table
{
    border-collapse: collapse;
}

.dyw_checkboxdownlist table td
{
    padding: 1px 0px 1px 2px;
}

.dyw_checkboxdownlist table tr:nth-child(even)
{
    background-color: #E5EFFE;
}

.dyw_checkboxdownlist div:nth-child(1)
{
    overflow-y: auto;
    overflow-x:hidden;
}

.dyw_checkboxdownlist input[type='button']:hover{
    cursor:pointer;
}

3.js代码                                                                                  

/*
*checkboxdownlist
*dyw  2015/1/28
*
使用 eg:
//配置控件
        var checkobj = {
            control: "selectmodule",
            data: ModuleData,
            container: { height: 200
            },
            button: {
                selall: "hide",
                clearall: "show"
            }
        };
        //创建对象
        var checkboxlist = new dyw_checkboxdownlist(checkobj);

        //初始化
        checkboxlist.Init();
        //获取选中数据
        checkboxlist.GetData();
*
*/

function dyw_checkboxdownlist(obj) {
    this.Init =
    /*
    *初始化 下拉框
    *obj
    *obj.control:附加到的控件的id
    *obj.data:数据
    *obj.container.height //后面继续拓展其他可设置属性
    *obj.button.selall: show / hide  选择全部按钮
    *obj.button.clearall: show / hide  清空全部按钮
    */
    function f_dyw_InitCheckBoxDownList() {
        //附加到的控件的ID
        var control = $('#' + obj.control).css("cursor", "pointer");
        //获取附加到的控件的离页面的 top 和left
        var off = control.offset();

        //div 容器
        var div = $('<div id="dyw_' + obj.control + 'checkbox_downlistdiv" class="dyw_checkboxdownlist"></div>').css({ "top": off.top + control.height(), "left": off.left, "height": obj.container.height,"width":control.width()});
        //添加到页面中
        $(document).find("body").append(div);
        //添加check容器 和 按钮容器
        div.append($('<div><table style="width:'+(control.width()-20)+'px"></table></div>').height(obj.container.height - 24)).append($('<div></div>'));

        //按钮
        var selall = $('<input class="dyw_cbdl_selall" type="button" value="全选" />').css({ "float": "right", "margin": "2px" });
        var clear = $('<input class="dyw_cbdl_clearall" type="button" value="清空" />').css({ "float": "right", "margin": "2px" });

        //控制按钮显示或者隐藏
        //选择全部按钮
        if (obj.button.selall == "hide") {
            selall.hide();
        }

        //选择清空全部按钮
        if (obj.button.clearall == "hide") {
            clear.hide();
        }
        //将按钮添加到div 容器中
        div.find("div:eq(1)").append(selall).append(clear);
        //根据传递进来的数据 添加checkbox
        $(obj.data).each(function (index, element) {
            div.find("div table").append('<tr><td><input type="checkbox" class="dyw_checkbox" value="' + element.ID + '" /><span style="width:' + (control.width() - 20) + 'px">' + element.Name + '</span></td></tr>');
        });
        //全选按钮单击
        selall.click(function () {
            control.val("");
            var check = div.find("div table").find(".dyw_checkbox");
            check.prop("checked", true);
            check.change();

        });
        //清空按钮单击
        clear.click(function () {
            var check = div.find("div table").find(".dyw_checkbox");
            check.prop("checked", false);
            check.change();
        });
        //checkbox 选择变化
        div.find("div table").find(".dyw_checkbox").change(function () {
            var changetext = $(this).parent().find("span").html();
            //区分是否录入还是取消悬着
            if ($(this).prop("checked")) {
                control.val(control.val() + changetext + ",");
            } else {
                control.val(control.val().replace(changetext + ",", ""));
            }
            //调用一下附加到的控件的改变事件,可以方便页面使用
            control.change();
        }).click(function () {
            $(this).prop("checked") == true ? $(this).prop("checked", false) : $(this).prop("checked", true);
            $(this).change();
        });

        //行单击，触发checkbox选中
        div.find("div table tr td").click(function () {
            $(this).find("input").prop("checked") == true ? $(this).find("input").prop("checked", false) : $(this).find("input").prop("checked", true);
            $(this).find("input").change();
        }).css("cursor", "pointer");

        //鼠标移出div,隐藏
        div.mouseout(function () {
            $(this).hide();
        }).mouseover(function () {
            $(this).show();
        });

        //控件单击弹出
        control.bind("click", function () {
            div.show();
        });
    };
    this.GetData =
    /*
    *id 附件控件的id
    *返回选中值  以逗号为分割
    */
    function f_dyw_GetCheckBoxDownListCheckData() {
        var returnstr = "";
        $("#dyw_" + obj.control + "checkbox_downlistdiv").find(".dyw_checkbox:checked").each(function (index, element) {
            returnstr += $(element).val() + ",";
        });
        return returnstr.substring(0, returnstr.length - 1);
    };
};

4.html代码                                                                              

<!DOCTYPE html>

<html>
<head>
    <title>测试checkboxdownlist</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/CheckBoxDownList.js"></script>
    <link href="../css/CheckBoxDownList.css" rel="stylesheet" type="text/css" />

    <script>
        $(function () {
            var obj = [
                { ID: 1, Name: "中国" },
                { ID: 2, Name: "美国" },
                { ID: 3, Name: "俄罗斯" },
                { ID: 4, Name: "日本" }
            ];
            var checkobj = {
                control: "checkboxdownlist",
                data: obj,
                container: {
                    height: 150
                },
                button: {
                    selall: "show",
                    clearall: "show"
                }
            };

            //创建对象
            checkboxlist = new dyw_checkboxdownlist(checkobj);
            //初始化
            checkboxlist.Init();
        })
    </script>
</head>
<body>
    <input type="text" id="checkboxdownlist" maxlength="100" />
</body>

</html>

转载于:https://www.cnblogs.com/DengYW/p/4359712.html