layui 第三方组件平台

返回首页 发布组件

省市区三级联动改良版,拿到的是省市区的code码,可以赋值,用法自己有介绍

更新:2020-11-25 创建:2020-12-3

文档

js 部分
 <script src="./layui/layui.js"></script>
<script>
// 组件路径
layui.config({
base: './js/'
}).extend({
bioarea: 'bioarea'
});
</script>
<script>
layui.use(['form', 'bioarea'], function() {

var form = layui.form
, bioarea = layui.bioarea

bioarea.render({
elem: '#bioarea-wrap',
defaultData: {
provinceCode: '110000',
cityCode: '110100',
countyCode: '110113'
},
form
})
//监听提交
form.on('submit(demo1)', function(data) {
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});


//表单取值
layui.$('#LAY-component-form-getval').on('click', function() {
var data = form.val('example');
console.log(data);
alert(JSON.stringify(data));
});

});
</script>

html 部分
 <form class="layui-form bio-form-box" action="" lay-filter="example">
<div class="layui-col-xs12">
<div class="layui-form-item" id="bioarea-wrap">
<label class="layui-form-label add-width required">所属地域</label>
<label class="layui-form-label small-width">省</label>
<div class="layui-input-inline">
<select style="width: 100px;" class="level-1-select" lay-filter="#bioarea-wrap1level"
name="province">
<option value="">请选择省</option>
</select>
</div>
<label class="layui-form-label small-width">市</label>
<div class="layui-input-inline">
<select class="level-2-select" lay-filter="#bioarea-wrap2level" name="city">
<option value="">请选择市</option>
</select>
</div>
<label class="layui-form-label small-width">区</label>
<div class="layui-input-inline">
<select class="level-3-select" lay-filter="#bioarea-wrap3level" name="county">
<option value="">请选择市</option>
</select>
</div>
</div>
</div>
</div>
</form>

下载

去 GitHub 下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。