jquery.ztree实现带城市搜索的二级省市树状选择框效果代码-html代码-BFW代码库

jquery.ztree实现带城市搜索的二级省市树状选择框效果代码

代码语言：html

所属分类：其他

代码描述：jquery.ztree实现带城市搜索的二级省市树状选择框效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/zTreeStyle.css">



</head>

<body>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul class="list">
                <li class="title">&nbsp;&nbsp;城市：<input id="citySel" type="text" value="" onkeyup="AutoMatch(this)" style="width: 120px;" />
                </li>
            </ul>
        </div>
    </div>
    <div id="menuContent" class="menuContent" style="displayx: none; position: absolute;">
        <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 110px;">
        </ul>
    </div>



    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.ztree.search.js"></script>
    <script>

        
        
        var setting = {
          view: {
            selectedMulti: false //是否允许多选
          },
          check: {
            enable: true },
        
        
          data: {
            simpleData: {
              enable: true } },
        
        
          callback: {
            //zTree节点的点击事件
            onClick: onClick } };
        
        
        
        //Ztree的初始数据
        var zNodes = [
        { id: 1, pId: 0, name: "北京" },
        { id: 2, pId: 0, name: "天津" },
        { id: 3, pId: 0, name: "上海" },
        { id: 6, pId: 0, name: "重庆" },
        { id: 4, pId: 0, name: "河北省", open: true },
        { id: 41, pId: 4, name: "石家庄" },
        { id: 42, pId: 4, name: "保定" },
        { id: 43, pId: 4, name: "邯郸" },
        { id: 44, pId: 4, name: "承德" },
        { id: 5, pId: 0, name: "广东省", open: true },
        { id: 51, pId: 5, name: "广州" },
        { id: 52, pId: 5, name: "深圳" },
        { id: 53, pId: 5, name: "东莞" },
        { id: 54, pId: 5, name: "佛山" },
        { id: 6, pId: 0, name: "福建省", open: true },
        { id: 61, pId: 6, name: "福州" },
        { id: 62, pId: 6, name: "厦门" },.........完整代码请登录后点击上方下载按钮下载查看