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

拼搏现实的明天。 2022-01-30 05:21 228阅读 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 条评论，228人围观）

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

相关阅读

相关二级联动下拉列表

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

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

相关 JavaWeb Ajax实现下拉框联动

博主在做项目时，需要做一个根据学期无刷新地址栏获取课程的功能，类似于地区联动选择。如图所示： 1.运行演示 ![在这里插入图片描述][20210119154723185

谁践踏了优雅/ 2023年01月08日 08:18/ 0 赞/ 164 阅读

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

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

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

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

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

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

相关 js下拉列表二级联动

学了JS也有一段时间了，今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有

刺骨的言语ヽ痛彻心扉/ 2022年06月01日 04:41/ 0 赞/ 414 阅读

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

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

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

相关二级以下下拉菜单

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

系统管理员/ 2022年05月19日 05:10/ 0 赞/ 254 阅读

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

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

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

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

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

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

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

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

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