下拉多选框勾选效果

代码语言:html

所属分类:表单美化

代码描述:下拉多选框勾选效果采用jquery及combox插件实现

代码标签: 勾选 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["combox"], function() {
                var data = [{
                    id: "1", text: "选项1"
                },
                    {
                        id: "2", text: "选项2"
                    },
                    {
                        id: "3", text: "选项3"
                    },
                    {
                        id: "4", text: "选项4"
                    },
                    {
                        id: "5", text: "选项5"
                    },
                    {
                        id: "7", text: "选项3"
                    },
                    {
                        id: "8", text: "选项4"
                    },
                    {
                        id: "9", text: "选项5"
                    }]
                $("#combox1").combox({
                    id: "id",
                    name: "text",
                    data: data,
                    valueChange: function(data) {
                        //返回data,filterData,selectData
                    }
                })
                var cb1 = $("#combox1").data('combox');
                function getSelect() {
                    alert(JSON.stringify(cb1.options.selectData));
                }

            });
        });
    </script>
    <style>
       * {
            box-sizing: border-box;
        }

        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .combox-box {
            width: 160px;
            height: 24px;
            border: 1px solid #ccc;
            cursor: pointer;
            overflow: hidden;
            font-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0