[CitySelect 城市選擇 - FeArt 中文文檔 - 文江博客 (wenjiangs.com)](https://www.wenjiangs.com/doc/feart-cityselect) 實現了三級聯動 搜索：jquery地區選擇器組件 http://www.bootstrapmb.com/tag/diquxuanze https://www.cnblogs.com/mqingqing123/p/12099222.html address-picker  在html中引入js文件 ``` <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript"></script> <script src="js/address-picker.js" type="text/javascript"></script> ``` **精簡方式** ``` <span id="address_picker_text">選擇地址</span> var addressPicker1 = new addressPicker("address_picker_text");//默認展示三級聯動 ``` **自定義參數方式** ``` <span id="address_picker_text">選擇地址</span> var addressPicker1 = new addressPicker({ id:"address_picker_text", //想要展示在哪個頁面元素下 level:3, //設置幾級聯動，默認3，可支持1-5 levelDesc:["省份","城市","區縣","鄉鎮","社區"], //每級聯動標題展示文字,默認如左顯示 index:"996", //浮動面板的z-index，默認`996` separator:" / ", //選擇后返回的文字值分隔符，例如`四川省 / 成都市 / 武侯區`,默認` / ` isInitClick:true, //是否為元素id自動綁定點擊事件,默認`true` isWithMouse:false, //浮動面板是否跟隨鼠標點擊時坐標展示(而不是根據元素id的坐標).默認`false` offsetX:0, //改變位置的浮動面板x坐標偏移量，默認`0` offsetY:0, //浮動面板y坐標偏移量,默認`0` emptyText:"暫無數據", //數據為空時展示文字,默認'暫無數據' color:"#56b4f8", //主題顏色，默認#56b4f8 fontSize:'14px', //字體大小，默認14px isAsync:false, //是否異步加載數據，默認false，如果設置true的話asyncUrl必傳 asyncUrl:"", //異步加載url，data數據將無效 btnConfig:[], //面板下方展示的自定義按鈕組，格式見后面說明。默認不傳 data:"" //┌──未指定isAsync的時候以data為準，一次性加載所有數據 //├──可不傳,默認使用`data`文件夾下的三級數據json文件 }); ``` **事件方法** ``` show()顯示面板 hide()隱藏面板 refreshData(data) 重新載入地址data on(type,function) 綁定地址選擇面板事件 getCurrentObject() 獲取當前點擊節點數據 getTotalValueAsText() 獲取所有選擇節點的文本字符串 getTotalValueAsArray() 獲取所有選擇節點的數組結構 clearSelectedData() 清除所有選中值 setSelectedData(arr) 設置選中值 下方是一些代碼示例: addressPicker1.show(); //顯示面板 addressPicker1.hide(); //隱藏面板 addressPicker1.on("click", function () { //業務邏輯do whaterver you want ... console.log(addressPicker1.getCurrentObject()); //{code: 1101, text: "市轄區", level: 2} console.log(addressPicker1.getTotalValueAsText()); //北京市 / 市轄區 console.log(addressPicker1.getTotalValueAsArray());//{code:['11','1101'],text:['北京市','市轄區']} if (current_obj.level==3) { // ajax } $('#address_picker_text').text(addressPicker1.getTotalValueAsText()); }); //重新載入地址data var new_data = [{name:'名字1',code:'110',children:[{name:'名字1的兒子',code:'1101'}]}, {name:'名字2',code:'111'}]; address_picker.refreshData(new_data); address_picker.show(); //設置選中值 address_picker.setSelectedData([11,1101,110105]);//注意此處要傳完整路徑 $("#address_picker_text").text(address_picker.getTotalValueAsText()); //清除所有選中 address_picker.clearSelectedData(); $("#address_picker_text").text("選擇地區"); ```