layui第三方省市区联动插件

效果

image.png

使用

html

<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" />
<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>

js

<script>
        layui.config({
            base: '' //静态资源所在路径
        }).extend({
           citypicker: '__STATIC__/layui/exts/city-picker/city-picker'//模块路径
        }).use(['form','upload','jquery','citypicker'], function () {
            var form = layui.form;
            var upload = layui.upload;
            var $ = layui.$;
            var cityPicker  = layui.citypicker;

           var currentPicker = new cityPicker("#city-picker", {
                provincename:"provinceId",
                cityname:"cityId",
                districtname: "districtId",
                level: 'districtId',// 级别
            });
            currentPicker.setValue("河南省/信阳市/新县");
        });

 </script>

tp5目录

image.png

原教程及下载链接：https://fly.layui.com/extend/citypicker/#doc