通过JS实现级联下拉菜单内容的动态获取

博客围绕菜单类型和父类菜单下拉控件的级联问题展开。菜单类型固定为一级、二级菜单,要实现级联,选一级菜单时父类菜单含根菜单,选二级菜单则通过Ajax从后台获取数据动态添加。还给出了HTML代码、解决方案及效果图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述:

菜单类型、父类菜单均为下拉控件,其中菜单类型的内容时固定的,只有两种:一级菜单、二级菜单。

如何实现级联,即菜单类型选择一级菜单时,父类菜单下拉控件内容包含:根菜单;菜单类型选择二级菜单时,则通过Ajax从后台获取数据,并动态添加到父类菜单下拉控件中。

 

html代码如下:

<tr>
	<td width="15%" style="text-align:right;"><strong style="color:#ff3636; font-weight:bold; margin-right:5px">*</strong>菜单类型 :</td>
	<td width="85%" style="text-align:left;" colspan="3">
	    <select  class="form-control select2" id="type" name="type" onchange="selectMenuType(this.value);">
				<option value=""> -- 请选择 -- </option>
				<option  th:selected="${weChatMenu.type eq c.key}" th:each="c:${typeMap}"  th:value="${c.key}" th:text="${c.value}" value="1" ></option>
		</select>
		<span class="form-control-static"></span>
	</td>
</tr>
<tr>
	<td width="15%" style="text-align:right;"><strong style="color:#ff3636; font-weight:bold; margin-right:5px">*</strong>父类菜单 :</td>
	<td width="85%" style="text-align:left;" colspan="3">
			<select  class="form-control select2" id="parentId" name="parentId">
					<option value=""> -- 请选择 -- </option>
					<option value="0" selected>根菜单</option>
			</select>
		<span class="form-control-static"></span>
	</td>
</tr>

 

解决方案:

菜单类型下拉控件onchange对应的function如下:

function selectMenuType(value){
			if(value == 1){
				 $("#parentId").empty();
				 $("#parentId").prepend("<option value=''>请选择</option>");
				 $("#parentId").append("<option value='0' selected>根菜单</option>");
			}else if(value == 2){
				var accountId = $("#accountId").val();
				alert("accountId="+accountId);
				if (!isEmpty(accountId)) {
					$.ajax({
						url : "/wechatmenu/getLatestOneLevelMenuByAccountId",
						async : false,
						type : "POST",
						contentType: "application/x-www-form-urlencoded; charset=utf-8",
						data : "accountId=" + accountId,
						dataType: 'json',
						cache : false,
						success: function(result){
			   			     if (result.success){
			   			    	 alert(result.data);
			   			    	 var maps=JSON.parse(result.data);
			   			    	 var length=maps.length;
			   			    	 $("#parentId").empty();
			   					 $("#parentId").prepend("<option value=''>请选择</option>");
			   			    	 for(var i=0;i<length;i++){
			   			    		 var map=maps[i];
			   			    		 alert("id="+map.id+"  title="+map.title);
			   			    		 //alert("id="+map["id"]+"  title="+map["title"]);
			   			    		 $("#parentId").append("<option value=\""+map.id+"\">"+map.title+"</option>");
			   			    	 }
			   				}else{
			   					alert("提示:操作失败!");
			   				}
			   			}  
					});	
				}else{
					alert("请先选择所属公众号!");
					return false;
				}
			}
		}

上述ajax异步请求调用的后台接口如下:

/**
	 * 获取指定accountId的一级菜单
	 * @param request
	 * @param accountId
	 * @return
	 */
	@RequestMapping("/getLatestOneLevelMenuByAccountId")
	@ResponseBody
	public Map<String,Object> getLatestOneLevelMenuByAccountId(HttpServletRequest request,@RequestParam(name = "accountId") Integer accountId){
		
		Map<String, Object> map = new HashMap<>();
		try {
			List<WeChatMenu> weChatMenuList=new ArrayList<WeChatMenu>();
			JSONArray jsonArray=new JSONArray();
			if(null!=accountId) {
				weChatMenuList=weChatMenuService.getWeChatMenuListByAccountIdWithOneLevelMenu(accountId);
				if(null!=weChatMenuList&&weChatMenuList.size()>0) {
					for(int i=0;i<weChatMenuList.size();i++) {
						JSONObject jsonObject=new JSONObject();
						WeChatMenu weChatMenu=weChatMenuList.get(i);
						jsonObject.put("id", weChatMenu.getId());
						jsonObject.put("title", weChatMenu.getTitle());
						
						jsonArray.add(jsonObject);
					}
				}
			}
			map.put("success",true);
			map.put("msg","操作成功");
			map.put("data",jsonArray.toJSONString());
		} catch (Exception e) {
			e.printStackTrace();
			map.put("success",false);
			map.put("msg","操作失败!");
		}
		
		return map;
	}

效果图:

菜单类型选择的一级菜单,此时父类菜单下拉控件内容为根菜单

菜单类型选择的二级菜单,此时弹出的alert如下:

动态添加完成后的父类菜单下拉控件的内容如下图

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值