国省市县 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>";
                  }

                $(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属性就可以了