php中layui 三级联动,layui三级联动 - Jpchina的个人空间 - OSCHINA - 中文开源技术交流社区...

地址

请选择或搜索省

请选择或搜索市

请选择或搜索县/区

layui.use('form', function(){

var form = layui.form;

var provinceText = "";

var cityText = "";

var areaText = "";

//异步加载下拉框数据

$.post("=\yii\helpers\Url::toRoute('region/index')?>", {"parent_id":0}, function (data) {

var oData = eval('(' + data + ')'),

$html = "";

for (i in oData){

$html += "" + oData[i] + "";

}

$("#province").append($html);

//append后必须从新渲染

form.render('select');

});

//监听省下拉框

form.on('select(province)', function(dataObj){

//移除城市下拉框所有选项

$("#city").empty();

var cityHtml = '请选择或搜索市';

$("#city").html(cityHtml);

var areaHtml = '请选择或搜索县/区';

$("#area").html(areaHtml);

provinceText = $("#province").find("option:selected").text();

var value = $("#province").val();

$.post("=\yii\helpers\Url::toRoute('region/index')?>",{"parent_id":value},function (data) {

var oData = eval('(' + data + ')'),

$html = "";

for (i in oData){

$html += "" + oData[i] + "";

}

$("#city").append($html);

form.render('select');

});

});

//监听市下拉框

form.on('select(city)', function(dataObj){

//移除县区下拉框所有选项

$("#area").empty();

var html = '请选择或搜索县/区';

$("#area").html(html);

cityText = $("#city").find("option:selected").text();

var value = $("#city").val();

if(!value){

form.render('select');

return false;

}

//异步加载下拉框数据

$.post("=\yii\helpers\Url::toRoute('region/index')?>",{"parent_id":value},function (data) {

var oData = eval('(' + data + ')'),

$html = "";

for (i in oData){

$html += "" + oData[i] + "";

}

$("#area").append($html);

form.render('select');

});

});

//监听县区下拉框

form.on('select(area)', function(dataObj){

areaText = $("#area").find("option:selected").text();

form.render('select');

});

});

【侵删】

参考文献：