HTML代码:
<div class="box">
<select name="province" class="province"></select>
<select name="city" class="city"></select>
<select name="area" class="area"></select>
</div>
Jquery代码(需要引入jQuery):
<sc
/* 省市区三级联动 */
function privance() //省
{
$.post("{:url('privance')}", {param1: 'value1'}, function(data, textStatus, xhr) {
var html;
for (var i = 0; i<data.length; i++) {
html += "<option value='"+data[i]['provinceid']+"'>"+data[i]['province']+"</option>";
}
$('.province').html(html);
});
}
privance();
function city() //市
{
var provinceid = $('.province').val(); //省id
$.post("{:url('city')}", {provinceid: provinceid}, function(data, textStatus, xhr) {
var html;
for (var i = 0; i<data.length; i++) {
html += "<option value='"+data[i]['cityid']+"'>"+data[i]['city']+"</option>";
}
$('.city').html(html);
area();
});
}
city();
function area() //县
{
var cityid = $('.city').val(); //市id
//alert(cityid);
$.post("{:url('area')}", {cityid: cityid}, function(data, textStatus, xhr) {
var html;
for (var i = 0; i<data.length; i++) {
html += "<option value='"+data[i]['areaid']+"'>"+data[i]['area']+"</option>";
}
$('.area').html(html);
});
}
area();
$('.province').change(function(event) { //选择省
city();
});
$('.city').change(function(event) { //选择市
area();
});
/* 省市区三级联动 end */
</sc
PHP代码(用的是thinkphp5):
// 省市区三级联动------------
//读取省
public function privance()
{
$list = Db::name('provinces')->select();
return $list;
}
//读取市
public function city($provinceid)
{
if ($provinceid) {
$where = "provinceid=$provinceid";
} else {
$where = "provinceid=110000";
}
$list = Db::name('cities')->where($where)->select();
return $list;
}
//读取区
public function area($cityid)
{
if ($cityid) {
$where = "cityid=$cityid";
} else {
$where = "cityid=110100";
}
$list = Db::name('areas')->where($where)->select();
return $list;
}
//省市区三级联动结束---------------
最佳答案
