jquery select-tree实现下拉多选单选树形目录框效果代码

代码语言:html

所属分类:表单美化

代码描述:jquery select-tree实现下拉多选单选树形目录框效果代码

代码标签: jquery select-tree 下拉 多选 单选 树形 目录框

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/select-tree.css">
    <style>
        body {
            margin: 50px 50px 50px 50px;
        }
    </style>
</head>

<body>

    <label>单选(目录不可选)</label>
    <div id="radio1" class="treePickerWrapper"></div>
    <button id="radio1-bt">获取选项内容</button>
    <hr>
    <label>单选(目录可选)</label>
    <div id="radio2" class="treePickerWrapper"></div>
    <hr>
    <label>多选(目录不可选)</label>
    <div id="check" class="treePickerWrapper"></div>
    <button id="check-bt">设置选项内容</button>
    <hr>
    <label>多选(目录可选)</label>
    <div id="check1" class="treePickerWrapper"></div>
    <hr>
    <label>初始化</label>
    <div id="init" class="treePickerWrapper"></div>
    <hr>

<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/bootstrap-3.3.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/select-tree.js"></script>
    <script>
        $("#init").myTree().addTreeEvent();
    
        let data = [
            {
                key: "gx",
                name: "广西.........完整代码请登录后点击上方下载按钮下载查看

网友评论0