JQuery 中利用$.ajax()方法做的四级级联
来源:互联网 发布:广州周末 知乎 编辑:程序博客网 时间:2024/05/15 04:08
js代码如下所示:
后台中Action的代码如下:
在userManagerServiceImpl中被调用的放法如下:
用上面这种方法不仅可以做到四级级联,还可以扩展到无限级的级联
function getIndustry2List(obj){var superCode = obj.value;$.ajax({url:'${base}/editEntInformation/getIndustryList2.action?fresh='+Math.random(),data:{superCode:superCode},dataType:'json',type:'post',cache:'false',success:function(data){var arr = eval(data);var industry2 = document.getElementById("ent.industry2").value;$("#industry2").empty();$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry2']"));$("#industry3").empty();$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry3']"));$("#industry4").empty();$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry4']"));for(var i = 0; i < arr.length; i++){if(arr[i].industryCode == industry2){$("<option value='"+arr[i].industryCode+"' selected>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry2']"));}else{$("<option value='"+arr[i].industryCode+"'>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry2']"));;}}}});}//获取行业中类function getIndustry3List(obj){var superCode = obj.value;$.ajax({url:'${base}/editEntInformation/getIndustryList3.action?fresh='+Math.random(),data:{superCode:superCode},dataType:'json',type:'post',cache:'false',success:function(data){var arr = eval(data);var industry3 = document.getElementById("ent.industry3").value;$("#industry3").empty();$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry3']"));$("#industry4").empty();$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry4']"));for(var i = 0; i < arr.length; i++){if(arr[i].industryCode == industry3){$("<option value='"+arr[i].industryCode+"' selected>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry3']"));}else{$("<option value='"+arr[i].industryCode+"'>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry3']"));;}}}});}//获取行业小类function getIndustry4List(obj){var superCode = obj.value;$.ajax({url:'${base}/editEntInformation/getIndustryList4.action?fresh='+Math.random(),data:{superCode:superCode},dataType:'json',type:'post',cache:'false',success:function(data){var arr = eval(data);var industry4 = document.getElementById("ent.industry4").value;$("#industry4").empty();$("<option value=''>请选择</option>").appendTo($("select[name='ent.industry4']"));for(var i = 0; i < arr.length; i++){if(arr[i].industryCode == industry4){$("<option value='"+arr[i].industryCode+"' selected>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry4']"));}else{$("<option value='"+arr[i].industryCode+"'>"+arr[i].industryName+"</option>").appendTo($("select[name='ent.industry4']"));;}}}});}
页面代码如下:
<th>所属行业:</th> <td> <select id="industry1" name="ent.industry1" onchange="getIndustry2List(this);" class="edit_select" > <option value="">请选择</option> <#list dicIndustry1List?if_exists as son1> <option value="${son1.industryCode?if_exists}" <#if '${ent.industry1?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option> </#list> </select> <input type="hidden" id="ent.industry2" value="${ent.industry2?if_exists}"> <select id="industry2" name="ent.industry2" onchange="getIndustry3List(this);" class="edit_select"> <option value="">请选择</option> <#list dicIndustry2List?if_exists as son1> <option value="${son1.industryCode?if_exists}" <#if '${ent.industry2?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option> </#list> </select> <input type="hidden" id="ent.industry3" value="${ent.industry3?if_exists}"> <select id="industry3" name="ent.industry3" onchange="getIndustry4List(this);" class="edit_select"> <option>请选择</option> <#list dicIndustry3List?if_exists as son1> <option value="${son1.industryCode?if_exists}" <#if '${ent.industry3?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option> </#list> </select> <input type="hidden" id="ent.industry4" value="${ent.industry4?if_exists}"> <select id="industry4" name="ent.industry4" class="edit_select"> <option>请选择</option> <#list dicIndustry4List?if_exists as son1> <option value="${son1.industryCode?if_exists}" <#if '${ent.industry4?if_exists}'=='${son1.industryCode?if_exists}'>selected</#if>>${son1.industryName?if_exists}</option> </#list> </select> </td> </tr>在struts中配置如下:
<!--获取行业大类 [Young]--> <action name="getIndustryList2" class="cn.fulong.omp.web.action.EditEntInformationAction" method="getIndustryList2"> </action> <!--获取行业中类 [Young]--> <action name="getIndustryList3" class="cn.fulong.omp.web.action.EditEntInformationAction" method="getIndustryList3"> </action> <!--获取行业小类 [Young]--> <action name="getIndustryList4" class="cn.fulong.omp.web.action.EditEntInformationAction" method="getIndustryList4"> </action>
后台中Action的代码如下:
<div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">/**</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">*此处的set/get方法是为了获得各级联数据,用于回显编辑页的内容</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">*</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">**/</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; ">public List<DicIndustry> getDicIndustry1List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry1List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> "baseTransaction")).find("from DicIndustry where lev = '1'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> return dicIndustry1List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry1List(List<DicIndustry> dicIndustry1List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry1List = dicIndustry1List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> </div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public List<DicIndustry> getDicIndustry2List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry2List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> "baseTransaction")).find("from DicIndustry where lev = '2'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> return dicIndustry2List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry2List(List<DicIndustry> dicIndustry2List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry2List = dicIndustry2List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public List<DicIndustry> getDicIndustry3List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry3List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> "baseTransaction")).find("from DicIndustry where lev = '3'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> return dicIndustry3List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry3List(List<DicIndustry> dicIndustry3List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry3List = dicIndustry3List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public List<DicIndustry> getDicIndustry4List() {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry4List = ((BaseTransaction) Platform.getInstance().getBean(</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> "baseTransaction")).find("from DicIndustry where lev = '4'");</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> return dicIndustry4List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "><br style="background-color: inherit;" /></div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> public void setDicIndustry4List(List<DicIndustry> dicIndustry4List) {</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> this.dicIndustry4List = dicIndustry4List;</div><div style="background-color: inherit; font-family: 微软雅黑; font-size: 14px; "> }</div>
//获取行业大类 Young public String getIndustryList2() throws IOException{ List<DicIndustry> industry2 = userManagerService.getIndustry2(superCode); JSONObject jsonObject = new JSONObject(); jsonObject.put("json", industry2); String jsonString = jsonObject.getString("json"); HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); response.setHeader("content-type", "text/html;charset=utf-8"); response.getWriter().write(jsonString); return null; }//获取行业中类 Young public String getIndustryList3() throws IOException{ List<DicIndustry> industry3 = userManagerService.getIndustry3(superCode); JSONObject jsonObject = new JSONObject(); jsonObject.put("json", industry3); String jsonString = jsonObject.getString("json"); HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); response.setHeader("content-type", "text/html;charset=utf-8"); response.getWriter().write(jsonString); return null; }//获取行业小类 public String getIndustryList4() throws IOException{ List<DicIndustry> industry4 = userManagerService.getIndustry4(superCode); JSONObject jsonObject = new JSONObject(); jsonObject.put("json", industry4); String jsonString = jsonObject.getString("json"); HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); response.setHeader("content-type", "text/html;charset=utf-8"); response.getWriter().write(jsonString); return null; }
在userManagerServiceImpl中被调用的放法如下:
public List<DicIndustry> getIndustry2(String superCode) { // TODO Auto-generated method stub List<DicIndustry> industry2 = baseTransaction.find( "from DicIndustry where lev = 2 and uperIndustry = ?", superCode); return industry2; } public List<DicIndustry> getIndustry3(String superCode) { // TODO Auto-generated method stub List<DicIndustry> industry3 = baseTransaction.find( "from DicIndustry where lev = 3 and uperIndustry = ?", superCode); return industry3; } public List<DicIndustry> getIndustry4(String superCode) { // TODO Auto-generated method stub List<DicIndustry> industry4 = baseTransaction.find( "from DicIndustry where lev = 4 and uperIndustry = ?", superCode); return industry4; }
用上面这种方法不仅可以做到四级级联,还可以扩展到无限级的级联
0 0
- JQuery 中利用$.ajax()方法做的四级级联
- 利用了jquery的ajax实现二级联互动菜单
- ajax 四级级联菜单(jquery实现)
- ajax做的二级级联
- 利用php+jQuery+ajax实现汽车车型四级联动下拉菜单
- 使用jQuery+ajax实现级下拉列表的级联显示
- jquery 实现的省市区级联,无ajax
- jquery 实现的省市区级联,无ajax
- jquery 实现的省市区级联,无ajax
- jQuery + Ajax + json 级联
- struts中利用jquery的$.ajax方法来动态获得图片以及信息
- jQuery+java实现四级级联菜单
- jQuery中Ajax-ajax方法
- jQuery中$.Ajax方法
- 利用JQuery的$.ajax()调用asp.net的后台方法
- 利用JQuery的$.ajax()调用asp.net的后台方法
- struts2的验证码及利用jquery发送ajax请求并利用json做数据交换
- jQuery中Ajax方法的使用
- LeetCode || LRU Cache
- APP如何赚钱
- 关于网格划分策略的连续蚁群算法(matlab)
- U-Boot 的移植
- 分布式Web服务器架构演变形成
- JQuery 中利用$.ajax()方法做的四级级联
- Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flash Pl
- iOS提交后申请加急审核
- [leetcode] Permutation Sequence
- 【Unity3D自学记录】NGUI之显示2D游戏物体的名字
- 蚁群算法求解TSP问题的matlab程序
- Struts2的开发模式
- 如何在数据展现中有效地使用文本?
- hdu 3506 monkey party(环形dp)