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

问题描述：

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

如何实现级联，即菜单类型选择一级菜单时，父类菜单下拉控件内容包含：根菜单；菜单类型选择二级菜单时，则通过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如下：

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