国省市县 ajax 地区级联动

国家 省 市 县/地区  地区级联动 实现

1：在HTML 页面 常常有这样的格式 点击父级元素出现子元素，原理都是懂得这里给大家来实现

<tr>
<td>
<span style="font-weight: bold">住址</span>  <br/>
国家 <select name="address" id="">
<option value="0" checked> 请选择 </option>
<?php foreach($region_list as $v):?>
<option value=<?= $v['region_id'] ?>>
<?=$v['region_name']?>
</option>
<?php endforeach;?>
</select>
</td>
</tr>

2：要记得 在html页面引入jquery文件  然后进行事件绑定 通过json的ajax传值 来获得效果 下面是代码

<script>

//定义加载函数

//把input对象委托给document对象
$(document).on("change",":input[name='address']",function(){//给动态的内容父级对象绑定change事件
//给select一个内容改变事件
// $(":input[name='region']").change(function(){
//获取region_id
var region_id=$(this).val();
//当前对向，追加时用

// alert(region_id);

$(this).nextAll().remove(); //清除一级后所有的无数据的重复追加

//将下拉框里的请选择的value值设为0，防止点击请选择的时候继续追加
if(region_id==0){
return false; //选择为空 下面的ajax请求不触发
}

//ajax请求

var url="?r=course/get"; //请求地址
$.getJSON(url,{'region_id':region_id},function(msg){
if(msg.length>0){//避免二级后面继续追加
var str='<select name="address">\
<option value="0" >...请选择...</option>';
$.each( msg, function(k,v){
str+="<option value="+ v.region_id+" >"+ v.region_name+"</option>";

});
str+="</select>";

4000
}

$(this).after(str);
}.bind(this))

//console.log( $(":input[name='address']:last").val());
$('#s_address').val($(":input[name='address']:last").val())
})
</script>

3：将父级  Id 传到后台

将 id 接到  $sql="select * from region where parent_id= $id "

   将自己元素查到 ， 并 用过  echo json_encode($data)  的方法 将得到数据转（这里一般是一个二维数组）换成json格式，返回到前台，前台再处理

上边的代码 是我做一个注册用户时需要的 国家，省，市，地区/县, 的多级联动 下面是一个 需要选择省把所需要的市的展示出来，明白原理会一点jquery就可以轻松实现这个功能了

$(document).on('change','#province',function(){ //通过绑定事件
var province=$(this).val();
var str="";
$.ajax({
type:'get',
url: "{{url('getCityByPro_id')}}",
data:{pro_id:province},
dataType:'json',
success:function(msg){
str+='<select name="" id="">';
str+='<option value="">请选择城市</option>';
$.each(msg,function(k,v){
str+="<option>"+ v.region_name+"</option>";
});
str+='</select>';
$('#City').html(str);
// console.log(str);
}
});

})

4:在多提一句 在提交数据的时候只需要提交最后一个选择的地区的  id就可以  这里就需要

  $('#s_address').val($(":input[name='address']:last").val())

如果是表单提交的时候就需要 将下拉菜单的 最后一个值 赋给一个 input标签中 在不指定出现的次数的时候无法确认 name属性什么时候该出现 通过jquery来给值  在指定地方的时候 加一个name属性就可以了