本文实例为大家分享了layui实现三级联动效果的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<meta name=\"renderer\" content=\"webkit\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">
<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">
<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">
<meta name=\"format-detection\" content=\"telephone=no\">
<link rel=\"stylesheet\" href=\"src/css/layui.css\" />
</head>
<body>
<div class=\"layui-form\">
<div class=\"layui-input-inline\">
<select name=\"province\" lay-filter=\"province\" class=\"province\">
<option value=\"\">请选择省</option>
</select>
</div>
<div class=\"layui-input-inline\">
<select name=\"city\" lay-filter=\"city\" disabled>
<option value=\"\">请选择市</option>
</select>
</div>
<div class=\"layui-input-inline\">
<select name=\"area\" lay-filter=\"area\" disabled>
<option value=\"\">请选择县/区</option>
</select>
</div>
</div>
</body>
<script type=\"text/javascript\" src=\"src/layui.js\"></script>
<script type=\"text/javascript\" src=\"src/address.js\"></script>
<script type=\"text/javascript\">
layui.config({
base : \"src/\" //address.js的路径
}).use([ \'layer\', \'jquery\', \"address\" ], function() {
var layer = layui.layer, $ = layui.jquery, address = layui.address();
});
</script>
<html>
JS:address.js
layui.define([\"form\",\"jquery\"],function(exports){
var form = layui.form,
$ = layui.jquery,
Address = function(){};
Address.prototype.provinces = function() {
//加载省数据
var proHtml = \'\',that = this;
$.get(\"area\",{code:\'\',type:1}, function (pro) {
for (var i = 0; i < pro.length; i++) {
proHtml += \'<option value=\"\' + pro[i].code + \'\">\' + pro[i].name + \'</option>\';
}
//初始化省数据
$(\"select[name=province]\").append(proHtml);
form.render();
form.on(\'select(province)\', function (proData) {
$(\"select[name=area]\").html(\'<option value=\"\">请选择县/区</option>\');
var value = proData.value;
if (value > 0) {
$.post(\'area\',{code:value,type:2},function (val) {
//console.log(val.length) ;
that.citys(val) ;
},\"json\");
//that.citys(pro[$(this).index() - 1].childs);
} else {
$(\"select[name=city]\").attr(\"disabled\", \"disabled\");
}
});
},\'json\');
}
//加载市数据
Address.prototype.citys = function(citys) {
var cityHtml = \'<option value=\"\">请选择市</option>\',that = this;
for (var i = 0; i < citys.length; i++) {
cityHtml += \'<option value=\"\' + citys[i].code + \'\">\' + citys[i].name + \'</option>\';
}
$(\"select[name=city]\").html(cityHtml).removeAttr(\"disabled\");
form.render();
form.on(\'select(city)\', function (cityData) {
var value = cityData.value;
if (value > 0) {
$.post(\'area\',{code:value,type:3},function (area) {
that.areas(area) ;
},\"json\");
//that.areas(citys[$(this).index() - 1].childs);
} else {
$(\"select[name=area]\").attr(\"disabled\", \"disabled\");
}
});
}
//加载县/区数据
Address.prototype.areas = function(areas) {
var areaHtml = \'<option value=\"\">请选择县/区</option>\';
for (var i = 0; i < areas.length; i++) {
areaHtml += \'<option value=\"\' + areas[i].code + \'\">\' + areas[i].name + \'</option>\';
}
$(\"select[name=area]\").html(areaHtml).removeAttr(\"disabled\");
form.render();
}
var address = new Address();
exports(\"address\",function(){
address.provinces();
});
});
ajax ->PHP 后台
/**
* 地区三级联动
*/
public function areaAction(){
$code = $this->sys_getparam(\'code\' ) ; // 获取省市区数据
$type = $this->sys_getparam(\'type\' ) ;
if($type==1){ //省
$sql = \"
SELECT id AS code,province AS name FROM a_province ;
\" ;
}
if($type==2){ //市
$sql = \"
SELECT id AS code,city AS name FROM a_city WHERE province_id= $code ;
\" ;
}
if($type==3){ //区
$sql = \"
SELECT id AS code,district AS name FROM a_district WHERE city_id= $code ;
\" ;
}
$areaData = app::dbload($sql,\'all\');
echo json_encode($areaData) ;
}
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容