工作需要，然后就继续做新的东西，现在就需要一个二级联动，并且需要是树形的，支持搜索的功能
我网上查了查决定用ztree树形，加上bootstrap-select这个支持搜索的表单插件，好的，代码如下
<!DOCTYPE html> <HTML> <HEAD> <TITLE>select</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/demo.css" type="text/css"> <link rel="stylesheet" href="css/zTreeStyle.css" type="text/css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"> <link rel="stylesheet" href="dist/css/bootstrap-select.css"> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/jquery.ztree.core.js"></script> <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" defer></script> <script src="dist/js/bootstrap-select.js" defer></script> <script src="js/ceshi.js"></script> </HEAD> <BODY> <h1>ztree+bootstrap-select</h1> <div class="content_wrap" style="margin:0 auto;"> <div class="zTreeDemoBackground list2" > <ul class="list list1" > <li class="title title2"> 一级选择: <input id="citySel" type="text" readonly value="一级选择" style="width:120px;" onclick="showMenu();" /></li> <form class="form-inline 120px; height: 25px;"> <div class="form-group"> <label class="col-md-1 control-label" for="lunchBegins">二级选择：</label> </div> <div class="form-group"> <select id="lunchBegins" class="selectpicker select1" data-live-search="true" data-live-search-style="begins" title="全部"> <!--<option>1</option>--> <!--<option>2</option>--> </select> </div> </form> </ul> </div> </div> <div id="menuContent" class="menuContent" style="display:none; position: absolute;"> <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul> </div> <script> <!-- var setting = { view: { showIcon: showIconForTree, showLine:false }, data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 } }, callback: { onClick:onClick } }; function showIconForTree(treeId, treeNode) { return !treeNode.isParent; }; function onClick(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), v = ""; nodes.sort(function compare(a, b) { return a.id - b.id; }); for (var i = 0, l = nodes.length; i < l; i++) { v += nodes[i].name + ","; } if (v.length > 0) v = v.substring(0, v.length - 1); var cityObj = $("#citySel"); cityObj.attr("value", v); for (var i = 0; i < nodes.length; i++) { v = nodes[i].name + ","; var nid = nodes[i].id; } for(var i = 0 ; i < zNodes.length; i++){ // console.log(i,"类型："+typeof i,zNodes[i]); var node=zNodes[i]; } var nid=nid+""; var options = ""; $.each(zNodes,function(i,v){ if(v.pId == nid){ options+="<option>"+v.name+"</option>"; } }); $("#lunchBegins").html(options); $('#lunchBegins').selectpicker('refresh'); } var options = ""; $.each(zNodes,function(i,v){ options+="<option>"+v.name+"</option>"; }); $("#lunchBegins").html(options); function showMenu() { var cityObj = $("#citySel"); var cityOffset = $("#citySel").offset(); $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast"); $("body").bind("mousedown", onBodyDown); } function hideMenu() { $("#menuContent").fadeOut("fast"); // $("#menuContent2").fadeOut("fast"); $("body").unbind("mousedown", onBodyDown); } function onBodyDown(event) { if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) { hideMenu(); } } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); //--> </script> </BODY> </HTML>已上传到GitHub，这里是演示地址