基于地区的三级下拉联动我们会经常用到, 这里基于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; }