layui 第三方组件平台

返回首页 发布组件

省市区联动选择,目前最完美的。 2018-12-05 优化设置默认值的方法,重新下载覆盖原文件, 2018-12-13 修复可以使用多个选择的bug

文档



按插件规范添加到项目中,使用方式:

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");
currentPicker.setValue("河南省/信阳市/新县");


});

</script>
支持界面上放置多个下拉选择,


参考用例如下:
                        <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">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label width_auto text-r" style="margin-top:2px">省市县2:</label>
<div class="layui-input-inline" style="width:400px">
<input type="text" autocomplete="on" class="layui-input" id="city-picker2" name="city-picker2" readonly="readonly" data-toggle="city-picker">
</div>
</div>
            var currentPicker = new cityPicker("#city-picker", {
provincename:"provinceId",
cityname:"cityId",
districtname:"districtId"
});
//currentPicker.setValue("河南省/信阳市/新县");

var currentPicker2 = new cityPicker("#city-picker2", {
provincename: "provincenameid2",
cityname: "citynameid2",
districtname: "districtnameid2"
});
使用有问题,联系QQ:340114173