效果:

;

?

?實現：

layui官網的文檔寫的比較詳細：https://fly.layui.com/extend/citypicker/

這里主要講一下在第一次使用的時候踩的坑

1.使用方法：

head部分引用：

<script src="/LayuiAdmin/layui/layui_exts/city-picker/city-picker.data.js"></script><link href="/LayuiAdmin/layui/layui_exts/city-picker/city-picker.css" rel="stylesheet" />

body部分：

<div class="layui-inline"><label class="layui-form-label width_auto text-r" style="margin-top:2px">省市縣：</label><div class="layui-input-inline" style="width:400px"><input type="text" autocomplete="on" class="layui-input" id="city-picker" name="city-picker" readonly="readonly" data-toggle="city-picker" placeholder="請選擇"></div> </div>

?

foot部分：

<script>layui.config({base: '/layuiadmin/' //靜態資源所在路徑}).extend({index: 'lib/index' //主入口模塊, citypicker: '{/}/layuiadmin/layui/layui_exts/city-picker/city-picker' // {/}的意思即代表采用自有路徑，即不跟隨 base 路徑}).use(['jquery', 'index', 'table', 'citypicker'], function () {var $ = layui.$, table = layui.table, form = layui.form, cityPicker = layui.citypicker;var currentPicker = new cityPicker("#city-picker", {provincename:"provinceId",cityname:"cityId",districtname: "districtId",level: 'districtId',// 級別});currentPicker.setValue("河南省/信陽市/新縣");});</script>

引入需要使用的包，這些官網使用文檔上可以直接免費下到，你甚至可以不用注冊：

一個圖片一個css文件，兩個js

2.踩坑：

萬事具備之后調試報錯：

Layui hint: index is not a valid module

?

?原因是沒看懂文檔所描述的參數的含義：

官網上面所描述的路徑怎么改我沒有試，這里貼一下我自己的解決方案：

layui.config({base: '../../assets/' //靜態資源所在路徑---這個就是為了指向lib所在的目錄}).extend({citypicker: 'lib/layui/city-picker'---這個類似于requirejs-main里面工具包引入的方式，承接上面的base的路徑，繼續往下深入到具體路徑}).use(['jquery', 'table', 'citypicker'], function () {//---聲明要引用的模塊var $ = layui.$, table = layui.table, form = layui.form, cityPicker = layui.citypicker;var currentPicker = new cityPicker("#parent_node", {provincename:"provinceId",cityname:"cityId",districtname: "districtId",level: 'districtId',// 級別--- 你要展示到哪一級，比如是展示到區縣還是地市，});currentPicker.setValue("河南省/信陽市/新縣");});

如果這個還是解決不了可以參考下layui的模塊規范：https://www.layui.com/doc/base/modules.html#extend?

調試之后偶爾會報文件找不到：

?從文檔里面下載的圖片拷到和css文件平級的路徑可以解決其中一個，另一個圖片我也不知道是什么，直接在city-picker.js文件里面找到刪掉了，好了，世界安靜了！

另外還有jQuery的city-picker，也不錯，

?

另外，這種解決方案的弊端是，這些地市信息是存在js文件里的，萬一哪天地市信息調整了怎么辦呢？

?

3.關于動態賦值：

<title>動態賦值</title><script type="text/javascript">$(function(){$("#area").citypicker();$("#setBtn").click(function(){//賦值錢，必須先執行reset、destory$("#area").citypicker('reset');$("#area").citypicker('destroy');$("#area").citypicker({province: '江蘇省',city: '常州市',district: '溧陽市'});})})</script>

4.關于使用：

$("#provinceId").val(); "520000" $("#provinceId").parent()[0].innerText "貴州省/六盤水市" $("#cityId").val(); "520200" $("#cityId").parent()[0].innerText "貴州省/六盤水市"

?

總結

以上是生活随笔為你收集整理的layui city-picker js实现全国地市区域级联选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。