jquery comboTreePlugin实现下拉树状单选多选模糊搜索选择框效果代码

代码语言:html

所属分类:表单美化

代码描述:jquery comboTreePlugin实现下拉树状单选多选模糊搜索选择框效果代码

代码标签: jquery comboTreePlugin 下拉 树状 单选 多选 模糊 搜索 选择框

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        body{
            background: white;
        }
    </style>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/comboTreePlugin.css">

</head>

<body>

    <div class="wrapper">
        <div id="justAnInputBox1" class="select-tree-wrap"></div>
        <div id="justAnInputBox2" class="select-tree-wrap"></div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/comboTreePlugin.js"></script>

    <script type="text/javascript">
        // $.ajax({
        // 	url: '',
        // 	type: 'post',
        // 	contentType : "application/json;charset=utf-8",
        // 	dataType:'json',
        // 	success: function(data) {
        //
        // 	}
        // });

        var SampleJSONData = [
            {
                "id": '73A64FDAFFC',
                "title": "总裁办",
                "subs": [
            {
                "id": '73At4FDoFFC',
                "title": "张三"
            },
                        {
                            "id": '73At4FpAFFC',
                            "title": "李四"
                        },
            {
                "id": '73AtwFDAFFC',
                "title": "数据中心",
                "subs": [
                    {
                        "id": '13At4FDAFFC',
                        "title": "王五"
                    },
                    {
                        "id": '83At4FDAFFC',
                        "title": "赵武"
                    },
                                   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0