<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<div class="layui-input-inline">
<select name="province" lay-filter="state">
<option value="0">请选择</option>
</select>
</div>
<div class="layui-input-inline">
<select name="city" lay-filter="state">
<option value="0">请选择</option>
</select>
</div>
<div class="layui-input-inline">
<select name="district" lay-filter="state">
<option value="0">请选择</option>
</select>
</div>
</div>
</div>
<script type="text/javascript">
layui.use('form', function(){
var form = layui.form,
layer = layui.layer,
$ = layui.jquery;
var url = '你的URL'; //数据请求地址:根据父级ID获取下一级数据array
var province = ""; //初始化省名
var city = ""; //初始化市名
var district = ""; //初始化县/区名
//获取省数据
getJSON(url,$("select[name='province']").closest("div"));
//切换时获取子数据
form.on('select(state)', function(data){
$that = $(data.elem);
urls = url+"?pid="+data.value;
getJSON(urls,$that.closest("div").next());
});
function getJSON(urls,even){
$.getJSON(urls, function(json){
var pid = 0;
var name = even.find("select").attr("name");
var select = "<select name=\"" + name + "\" lay-filter=\"state\">";
select += "<option value=\"0\">请选择 </option>";
$(json).each(function(){
select += "<option value=\"" + this.id + "\"";
if(province == this.name || city == this.name || district == this.name){
select += " selected=\"selected\" ";
pid = this.id;
}
select += ">" + this.name + "</option>";
});
select += "</select>";
even.html(select);
var nextName = even.next().find("select").attr("name");
even.next().html("<select name=\"" + nextName + "\" lay-filter=\"state\"><option value=\"0\">请选择 </option></select>");
form.render('select');
if(pid != 0){
getJSON(url+"?pid="+pid,even.next());
}
});
}
});
</script>
getJSON方法异步返回数据格式:
0:{id: "99", name: "东丽区"}
1:{id: "100", name: "和平区"}