基于地区的三级下拉联动我们会经常用到, 这里基于TP+无限分类+AJAX+LAYUI做个实例, 效果如下

实现步骤如下:

1. 先制作 无限分类并添加些数据如下, 啥, 不懂无限分类, 看这里http://www.ncyteng.com/news/show/100

2. 初始化三级下拉标签

 <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">籍贯</label>
                           <div class="layui-inline" id="_province">
                            <select name="province" id="province" lay-filter="province">
                              <option value="">请选择省</option>
                              {:getSelectDown(2,0,"areaclass")}
                            </select>
                          </div>
                          <div class="layui-inline" style="display:none;" id="_city">
                            <select name="city" id="city" lay-filter="city" >
                            </select>
                          </div>
                          <div class="layui-inline" style="display: none;" id="_area">
                            <select name="area" id="area" lay-filter="area">
                            </select>
                          </div>
                    </div>

3. 监听省市下拉菜单

//注意: layui中, 监听select, 即使还是选择原来的值, 也会触发[这点要吐槽下],
      // 所以, 我们需要做个判断, 如果还是原来的值, 就什么都不做
       var db = document.body;
      $.data(db,"province",0); //存储初始省值
      $.data(db,"city",0);      //存储初始市值
      $.data(db,"area",0);      //存储初始区值
      //当省级下拉改变 时触发
      form.on("select(province)",function(data){
          var p1 = data.value;
          var old_p = $.data(db,"province"); 
          if(p1){
            //非选择空值
                if(old_p != p1){
                    //省有改变, 而不是原来的值
                    $.data(db,"province",p1); //设置临时存储为当前的省值
                    $.data(db,"city",0);      //存储初始市值
                    $.data(db,"area",0);      //存储初始区值
                    $.post('{:url("yteng/resumesdo/get_select")}',{pid:p1},function(d,status){
                            if(d){
                                //省级有子信息, 显示对应市级信息, 同时暂时也清空第三级并隐藏
                                $("select[name=city]").html("<option value=''>请选择市</option>" + d);
                                $("#_city").show();

                                $("select[name=area]").html("");
                                $("#_area").hide();
                                form.render("select");
                            }
                            else{
                                //省级没有子级, 则隐藏子一级市 及区县信息
                                $("select[name=city]").html("");
                                $("#_city").hide();

                                $("select[name=area]").html("");
                                $("#_area").hide();
                                form.render("select");
                            }
                           
                    });
                }
                
          }
          else{
               //没有选择任何省
               $.data(db,"province",0);
               $.data(db,"city",0);
               $.data(db,"area",0);      //存储初始区值
               //省级没有子级, 则隐藏子一级市信息
                            $("select[name=city]").html("");
                            $("#_city").hide();

                            $("select[name=area]").html("");
                            $("#_area").hide();
                            form.render("select");
          }
      })
      //当市级下拉改变时, 触发
      form.on("select(city)",function(data){
          var p2 = data.value;
          var old_c = $.data(db,"city");  //原市信息
          if(p2){
                if(p2 != old_c){
                      $.data(db,"city",p2);      //存储初始市值
                      $.data(db,"area",0);      //存储初始区值
                      $.post('{:url("yteng/resumesdo/get_select")}',{pid:p2},function(d,status){
                          if(d){
                              //市级有信息更新, 显示对应区县信息
                              $("select[name=area]").html("<option value=''>请选择市</option>" + d);
                              $("#_area").show();
                              form.render("select");
                          }
                          else{
                              $("select[name=area]").html("");
                              $("#_area").hide();
                              form.render("select");
                          }
                         
                      });
                }
          }
          else{
               //选择空值, 城市为0, 区县为0
               $.data(db,"city",0);
               $.data(db,"area",0);      //存储初始区值
               $("select[name=area]").html("");
               $("#_area").hide();
               form.render("select");
          }
      })

4. 请求TP页面得到下拉数据

public function get_select(){
		$pid = $this->request->post("pid");
		$id  = $this->request->post("id",0);
		echo getSelectDown($pid, $id, $table="areaclass");
	}

//得到类别的单个下拉
function getSelectDown($pid=0, $id=0, $table="sortclass"){
     $str = "";
     if($pid){
            $result = \think\Db::name($table)->where("parentid","=",$pid)
            ->field("id,sortname")
            ->order('orders', 'asc')
            ->select();
            if($result){
                foreach ($result as $v) {
                     if($v["id"] == $id){
                          $str .= "<option value='{$v["id"]}' selected>{$v["sortname"]}</option>\n";
                     }
                     else{
                          $str .= "<option value='{$v["id"]}'>{$v["sortname"]}</option>\n";
                     }
                }
            }

     }
     return $str;
}