二级联动 layui+ajax

二级联动 layui+ajax

这是第一次发布文章，主要是为了自己能够加强印象，同时也希望帮助到遇到困惑的朋友们。希望大家多多支持。大家先来看效果吧。

数据库

classify为0的是一级目录
classify为1 对应id为1的国学故事

layui中的html代码

<div class="layui-form-item">
    <label class="layui-form-label">课程分类</label>
      <div class="layui-input-inline">
      <select name="label" id="label" lay-verify="required"  lay-filter="label" class="select classifySelect" >
        <option value="0">--请选择--</option>
        {volist name="classify" id="vo" key="k"}
        <option  value="{$vo.id}">{$vo.label}</option>
       {/volist}
      </select>
      </div>
    
      <div class="layui-input-inline">
          <select name="se_label" id="se_label" class="select se_label">
              <option value="请选择"></option>
          </select>
      </div>   
  </div>

js代码

<script type="text/javascript">
    layui.form.on("select(label)",function() {
        label = $("#label").val();
       /* console.log(label+"!!!");
        console.log(data.value); //得到被选中的值]*/
        $.post(WST.U('admin/Abmovies/getClassifyById'),{id:label},function (result) {
            console.log(result);
            if(result.status == 1){
                data = result.data;
                city_html = "";
                $(data).each(function (i) {
                    city_html +=""+this.label+""
                });
                $('#se_label').html(city_html);
                layui.form.render('select'); //这个很重要
            }else if(result.status ==0){
                alert(result.message);
                return;
            }
        });

    })
</script>

controller中的方法（Abmovies）

public function getClassifyById(){
        $parentId = input('post.id');
        $info = model('Abclassify')->getClassifyById($parentId);
        if(!$info){
            return show(0,"error");
        }else{
            return show(1,"success",$info);
        }
    }

model中的方法（Abclassify）

public function getClassifyById($id=0){
	    $data=[
	        'classify' =>$id,
        ];
        $order=[
            'id' => 'desc',
        ];
        return $this->where($data)->order($order)->select();

    }

show方法（common.php定义）

function show($status, $message='' , $data=[]) {
    return [
        'status' => intval($status),
        'message' => $message,
        'data' => $data,
    ];
}

主要的思路：首先获取classify=0的集合，就可以回显一级分类。当你选中一级分类就会触发js，把一级分类的id传给getClassifyById这个方法。即查询classify为id的所有元素，结果为result.data。通过遍历把id，label的值拼接成字符串追加到id为se_label的select标签下回显。最后render更新。

tip: console.log(label+"!!!"); console.log(data.value); 任选一 测试是否获取到一级的id

console.log(result); 测试二级联动的数据