地点下来框的实现（php）

效果图：

样式（bootstrap）：

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

概念：

        这里做了两个change的动作：

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

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

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

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

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

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

代码如下：

ajax：    

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

动作事件:

1 //  area_province 省   ， area_city 市 ， area_district 区
 2       $(document).ready(function(){
 3           area_one('#area_province','#area_city','#area_district');
 4       })
 5 
 6       $('#area_province').change(function(){
 7 //          area('#area_province','#area_city');
 8           area_one('#area_province','#area_city','#area_district');
 9       });
10   
11       $('#area_city').change(function(){
12           area_two('#area_city','#area_district');
13           });

方法：

1       function  area_one(getSelect,serSelect,setSelect){
 2           var a =  $(getSelect).val();
 3           var html = '';
 4           if(a !== null && a !== '' && a !== undefined ){
 5               $.ajax({
 6                   type:"get",
 7                   url : "{:U('FullTime/area')}",
 8                   data:{ id : a },
 9                   dataType: "json",
10                   success: function(data){
11                       for (var i = 0; i < data.length; i++) {
12                           if(i == 0){
13                               html += "<option value=" + "'" + data[i].area_name + "'" + " " +"selected='selected'" +">"
14                                       + data[i].area_name +" </option>";
15                           }
16                           html += "<option value=" + "'" + data[i].area_name + "'" +">"
17                                   + data[i].area_name +" </option>";
18                       }
19                       $(serSelect).html(html);
20                       area_two(serSelect,setSelect)
21                   },
22                   error:function(jqXHR){
23                       alert("发生错误：" + jqXHR.status);
24                   },
25               });
26           }else{
27 
28           }
29       }

1       function area_two(getSelect,serSelect){
 2           var a =  $(getSelect).val();
 3           var html = '';
 4           if(a !== null && a !== '' && a !== undefined ){
 5               $.ajax({
 6                   type:"get",
 7                   url : "{:U('FullTime/area')}",
 8                   data:{ id : a },
 9                   dataType: "json",
10                   success: function(data){
11                       for (var i = 0; i < data.length; i++) {
12                           html += "<option value=" + "'" + data[i].area_name + "'" +">"
13                                   + data[i].area_name +" </option>";
14                       }
15                       $(serSelect).html(html);
16                   },
17                   error:function(jqXHR){
18                       alert("发生错误：" + jqXHR.status);
19                   },
20               });
21           }else{
22               alert("上一级不能为空");
23           }
24       }