地点下来框的实现（php）

效果图：

样式（bootstrap）：

class="selectpicker show-tick form-control"，就是多了个form-contro就行了

概念：

这里做了两个change的动作：

第一，当省的取值改变的时候，市和区的数据也会改变

第二，当市的取值改变的时候，区的数据也会改变

第一个动作在加载的时候就需要完成，也需要设置为省的改变动作。

第二个只需要设置市的改变动作即可。

根据上一级取到的数据来改变下一级的数据

数据的互动用ajax来实行，用ajax取到的数据只能在success里面有效。

代码如下：

ajax：

 public function area(){
         header("Content-Type: text/html; charset=UTF-8");
           if(I('get.id')){
                $area = M('area');
                $where = array();
                $where['area_name'] = I('get.id');
                $id = $area -> where($where) -> field('area_id') -> find();
                $where = null;
                  $where['parent_id'] = $id['area_id'];
                  $data = $area -> where($where) -> field('area_id,area_name,area_describe,parent_id') -> select();
                  $this->ajaxReturn($data,'json');
           }

动作事件:

 //  area_province 省   ， area_city 市 ， area_district 区
       $(document).ready(function(){
           area_one('#area_province','#area_city','#area_district');
       })

       $('#area_province').change(function(){
 //          area('#area_province','#area_city');
           area_one('#area_province','#area_city','#area_district');
       });

       $('#area_city').change(function(){
           area_two('#area_city','#area_district');
           });

方法：

       function  area_one(getSelect,serSelect,setSelect){
           var a =  $(getSelect).val();
           var html = '';
           if(a !== null && a !== '' && a !== undefined ){
               $.ajax({
                   type:"get",
                   url : "{:U('FullTime/area')}",
                   data:{ id : a },
                   dataType: "json",
                   success: function(data){
                       for (var i = ; i < data.length; i++) {
                           if(i == ){
                               html += "<option value=" + "'" + data[i].area_name + "'" + " " +"selected='selected'" +">"
                                       + data[i].area_name +" </option>";
                           }
                           html += "<option value=" + "'" + data[i].area_name + "'" +">"
                                   + data[i].area_name +" </option>";
                       }
                       $(serSelect).html(html);
                       area_two(serSelect,setSelect)
                   },
                   error:function(jqXHR){
                       alert("发生错误：" + jqXHR.status);
                   },
               });
           }else{

           }
       }

       function area_two(getSelect,serSelect){
           var a =  $(getSelect).val();
           var html = '';
           if(a !== null && a !== '' && a !== undefined ){
               $.ajax({
                   type:"get",
                   url : "{:U('FullTime/area')}",
                   data:{ id : a },
                   dataType: "json",
                   success: function(data){
                       for (var i = ; i < data.length; i++) {
                           html += "<option value=" + "'" + data[i].area_name + "'" +">"
                                   + data[i].area_name +" </option>";
                       }
                       $(serSelect).html(html);
                   },
                   error:function(jqXHR){
                       alert("发生错误：" + jqXHR.status);
                   },
               });
           }else{
               alert("上一级不能为空");
           }
       }