地点下来框的实现（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 = 0; i < data.length; i++) {
                          if(i == 0){
                              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 = 0; 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("上一级不能为空");
          }
      }