分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

jQuery select三级联动

发布时间:2023-09-06 02:04责任编辑:沈小雨关键词:jQuery

一:controller代码:

后台就简单返回map集合就行,表结构也是简单的通过父类Id来实现的

/** ????* 三级联动 ????* @param id 父类id ????* @return ????*/ ???@RequestMapping(value = "/Options", method = { RequestMethod.POST, RequestMethod.GET}) ???@ResponseBody ???public List<Map<String, Object>> Options(int id){ ???????List<Map<String, Object>> dataList=new ArrayList<Map<String,Object>>(); ???????try { ???????????if(id!=null && id!=0){ ???????????????List<Item> items=itemService.getAllName(id); ???????????????for (Item i : items) { ???????????????????Map<String, Object> map=new HashMap<String, Object>(); ???????????????????map.put("id", i.getId()); ???????????????????map.put("name", i.getName()); ???????????????????????dataList.add(map); ???????????????} ???????????} ???????} catch (Exception e) { ???????????e.printStackTrace(); ???????} ???????return dataList; ???} ???????

二:前端代码(ajax实现页面无刷新):

$().ready(function() { ???$("#oneId").on("change",function(){ ???????var oneId = $("#oneId").val(); ???????$("#twoId").html("<option value=‘0‘>--请选择--</option>"); ???????$("#threeId").html("<option value=‘0‘>--请选择--</option>"); ???????$.ajax({ ???????????url: "Options.action", ???????????type: "POST", ???????????data: { ???????????????itemCatId:oneId //一级类目id ???????????}, ???????????dataType: "json", ???????????success: function(data) { ???????????????$.each(data, function(idx, obj) { ???????????????????$("#twoId").append("<option value=‘"+obj.id+"‘>" + obj.name + "</option>"); ???????????????}); ???????????} ???????}); ???????}); ???$("#twoId").change(function () { ???????var twoId = $("#twoId").val(); ???????$("#threeId").html("<option value=‘0‘>--请选择--</option>"); ???????$.ajax({ ???????????url: "Options.action", ???????????type: "POST", ???????????data: { ???????????????itemCatId:twoId//二级类目id ???????????}, ???????????success: function(data) { ???????????????$.each(data, function(idx, obj) { ???????????????????$("#threeId").append("<option value=‘"+obj.id+"‘>" + obj.name+ "</option>"); ???????????????}); ???????????} ???????}); ???????});}); ??
页面代码就不贴了,此三级联动是在绑定好一级分类的基础上进行的,oneId,twoId,threeId分别指一,二,三级select的id

jQuery select三级联动

原文地址:https://www.cnblogs.com/hxbhdljmyz/p/9317826.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved