JQuery 中利用$.ajax()方法做的四级级联

来源:互联网 发布:广州周末 知乎 编辑:程序博客网 时间:2024/05/15 04:08
js代码如下所示:
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