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

拼搏现实的明天。 2022-01-30 05:21 240阅读 0赞

**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');
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 thymeleaf实现树状下拉框（二级联动）

项目场景：承接上篇文章，此次记录的是树状下拉框的二级联动，点击次链接查看上篇文章: [thymeleaf实现树状下拉框][thymeleaf]. 问题描述 `提

小鱼儿/ 2023年09月30日 00:57/ 0 赞/ 17 阅读

相关 jq实现二级菜单/下拉菜单

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan] 不是很难，直接上代码~ 有写

女爷i/ 2023年06月05日 08:08/ 0 赞/ 24 阅读

相关【JavaWeb】实现二级联动菜单

实现效果 ![%E4%BA%8C%E7%BA%A7%E8%81%94%E5%8A%A8%E8%8F%9C%E5%8D%95%E6%95%88%E6%9E%9C.gif][

Myth丶恋晨/ 2023年06月01日 11:11/ 0 赞/ 134 阅读

相关二级联动下拉列表

二级联动下拉列表需先选择英雄,才能在选择英雄的皮肤 html页面 <!DOCTYPE html> <html> <head>

忘是亡心i/ 2023年01月09日 12:36/ 0 赞/ 173 阅读

相关 layui结合ajax实现下拉菜单联动效果

![11f4800b45bf04c9cc53cb44278cf05e.png][] 大家好好，我是雄雄，欢迎关注公众号：雄雄的小课堂。昨天分享的是使用layui集合spr

ゝ一世哀愁。/ 2022年11月14日 13:18/ 0 赞/ 240 阅读

相关 Mybatis + js 实现下拉列表二级联动

Mybatis + js 实现下拉列表二级联动学习内容：一、业务需求二、实现效果三、代

太过爱你忘了你带给我的痛/ 2022年10月06日 04:58/ 0 赞/ 260 阅读

相关 easyui下拉框实现二级联动

原理：第一数组正常展示，根据选中的选项将选项下的数组赋给下一复选框 theGetData = data["linkage"];//ajax请求回来的

男娘i/ 2022年05月21日 04:05/ 0 赞/ 343 阅读

相关下拉菜单--二级联动菜单练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

系统管理员/ 2022年05月14日 13:42/ 0 赞/ 300 阅读

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

HTML内容： <li> <span>一级分类：</span> <select name="yjid" class="yjid">

拼搏现实的明天。/ 2022年01月30日 05:21/ 0 赞/ 241 阅读

相关 AJAX二级下拉联动【XML方式】

AJAX二级下拉联动案例我们在购物的时候，常常需要我们来选择自己的收货地址，先选择省份，再选择城市… 有没有发现：当我们选择完省份的时候，出现的城市全部都是根据省份来

太过爱你忘了你带给我的痛/ 2021年09月17日 06:40/ 0 赞/ 386 阅读