ajax实现数据库获取select二级联动下拉菜单

HTML内容:

<li>
    <span>一级分类:</span>
    <select name="yjid" class="yjid">
        <option value="">---所属分类---</option>
        <volist name="list" id="vo">
            <option value="{$vo['id']}">{$vo['name']}</option>
        </volist>
    </select>
</li>
<li>
    <span>二级分类:</span>
        <select name="ejid" class="ejid">
            <option value="">---所属分类---</option>
    </select>
</li>

jQuery内容:

<script>
  $(function(){
    $('.yjid').change(function(){
      var yjid = $('.yjid').val();
      $.ajax({
        url:"{:U('index/daohang_add_ajax')}",
        type:"POST",
        async:true,
        dataType:"json",
        data:{'yjid':yjid},
        success:function(data){
          var str = "";
          $.each(data, function(index, value){
            str += '<option value="' + value.subid + '">' + value.subname + '</option>';
          });
          //清空之前其他上级菜单遗留的子菜单,否则改变上级菜单后子菜单会包含多个上级菜单的全部子菜单
          $('.ejid').empty();         
          $('.ejid').append('<option value="">---所属分类---</option>' + str);
        },
      });
    });
  });
</script>

thinkphp内容:

//显示一级分类
public function daohang_add(){
	if(!session('username')){
	    $this->redirect('login/login');
	}
	$list = M('type')->select();
	$this->assign('list', $list);
	$this->display();
}
//显示对应二级分类
public function daohang_add_ajax(){
	if(!session('username')){
	    $this->redirect('login/login');
	}
	$data = I('yjid');
	$list = M('sub_type')->where('typeid='.$data)->select();
	$this->ajaxReturn($list, 'json');
}

猜你喜欢

转载自blog.csdn.net/qq_38882327/article/details/90311758