二级联动 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 +="<option value='"+this.id+"'>"+this.label+"</option>"
});
$('#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();
}