ajax + php 省市区三级联动
效果图：
数据库表：
html代码
<tr><td colspan="2">
<p class="short-input ue-clear">
<label>所在地：</label>
<select name="provinceid">
<?php echo Ousuclass::all_html_option($pros,"id");?>
</select>
<select name="cityid">
<?php if(isset($cities)):?>
<?php echo Ousuclass::all_html_option($cities,"id");?>
<?php else:?>
<option value="">请先选择所在省</option>
<?php endif;?>
</select>
<select name="countyid">
<?php if(isset($counties)):?>
<?php echo Ousuclass::all_html_option($counties,"id");?>
<?php else:?>
<option value="">请先选择所在地</option>
<?php endif;?>
</select>
<span><em>*</em></span>
</p>
</td></tr>
<tr>
<td colspan="2">
<p class="long-input ue-clear">
<label>通讯地址：</label>
<input type="text" name="companyaddress"/>
</p>
</td>
</tr>
ajax代码
<?php if("create"==$url_method):?>
$("input[name=companyname]").change(function () {
$("input[name=username]").val($("input[name=companyname]").val());
});
$("select[name=provinceid]").val("330000"); //写死，默认省份为浙江省
var url = "<?php echo "/".$url_module."/".$url_model?>/change/330000";
$.ajax({
type: "Post",
url: url,
data: {"id": "330000"},
success: function (res) {
var r = $.parseJSON(res);
if (r.ret == 0) {
var select = $("select[name=cityid]");
select.empty();
select.append("<option value=''></option>");
for (var i in r.obj) { //for...in 语句用于对数组或者对象的属性进行循环操作，for (变量 in 对象){}
select.append("<option value='" + r.obj[i].id + "'>" + r.obj[i].name + "</option>");
}
$("select[name=cityid]").val("330300");//写死，默认城市为温州
var url = "<?php echo "/".$url_module."/".$url_model?>/change/330300";
$.ajax({
type: "Post",
url: url,
data: {"id": "330300"},
success: function (res) {
var r = $.parseJSON(res);
if (r.ret == 0) {
var select = $("select[name=countyid]");
select.empty();
select.append("<option value=''></option>");
for (var i in r.obj) {
select.append("<option value='" + r.obj[i].id + "'>" + r.obj[i].name + "</option>");
}
} else {
alert(r.msg);
}
}
});
} else {
alert(r.msg);
}
}
});
<?php endif;?>
function change() {
$("select[name=provinceid]").change(function () {
$("select[name=countyid]").empty();
$("select[name=countyid]").append("<option value=''>请先选择所在地</option>");
var pid = $(this).val();
var url = "<?php echo "/".$url_module."/".$url_model?>/change/" + pid;
if ("" == pid)
return;
$.ajax({
type: "Post",
url: url,
data: {"id": pid},
success: function (res) {
var r = $.parseJSON(res);
if (r.ret == 0) {
var select = $("select[name=cityid]");
select.empty();
select.append("<option value=''></option>");
for (var i in r.obj) {
select.append("<option value='" + r.obj[i].id + "'>" + r.obj[i].name + "</option>");
}
} else {
alert(r.msg);
}
}
});
//改变地址
$("input[name=companyaddress]").val($(this).find("option:selected").text()); // $(this).find("option:selected").text();表示下拉框被选中的option标签的值
});
$("select[name=cityid]").change(function () {
var pid = $(this).val();
var url = "<?php echo "/".$url_module."/".$url_model?>/change/" + pid;
if ("" == pid)
return;
$.ajax({
type: "Post",
url: url,
data: {"id": pid},
success: function (res) {
var r = $.parseJSON(res);
if (r.ret == 0) {
var select = $("select[name=countyid]");
select.empty();
select.append("<option value=''></option>");
for (var i in r.obj) {
select.append("<option value='" + r.obj[i].id + "'>" + r.obj[i].name + "</option>");
}
} else {
alert(r.msg);
}
}
});
//改变地址
$("input[name=companyaddress]").val($("select[name=provinceid]").find("option:selected").text() + " " + $(this).find("option:selected").text());
});
$("select[name=countyid]").change(function () {
//改变地址
$("input[name=companyaddress]").val($("select[name=provinceid]").find("option:selected").text() + " " + $("select[name=cityid]").find("option:selected").text() + " " + $(this).find("option:selected").text());
});
php代码
<?php
protected function _getGlobalData($data){
$data = parent::_getGlobalData($data);
//省
$result = $this->mydb->find("select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where level = 1"); //dictxzqdms表名
$data["pros"] = $result["obj"];
if ($this->input->server('REQUEST_METHOD') == 'GET'&&("edit"==$this->url_method||"check"==$this->url_method)){
if(isset($data['datalist'])){
if(isset($data['datalist']['provinceid'])){
$result = $this->mydb->find("select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where parentcode='".$data['datalist']['provinceid']."'");
$data["cities"] = $result["obj"];
}
if(isset($data['datalist']['cityid'])){
$result = $this->mydb->find("select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where parentcode='".$data['datalist']['cityid']."'");
$data["counties"] = $result["obj"];
}
}
}
return $data;
}
/*
* 省市县级联
*/
public function change($proid=""){
if(""==$proid){
$result["ret"] = 1;
$result["msg"] = "no id";
echo json_encode($result);
exit;
}
$sql = "select administrativedivisioncode as id,administrativedivisionname as name from dictxzqdms where parentcode=$proid";
$re = $this->mydb->find($sql);
$result["ret"] = 0;
$result["obj"] = $re["obj"];
echo json_encode($result);
}
?>
