Jquery 三级联动

2025-02-16 技术教程

<scripttype="text/javascript">$(function(){ linkage.init('state','country','city'); linkage.init('state1','country1','city1'); }); </script></head> <body>出发地: <selectid="state"></select>  <selectid="country"></select>  <selectid="city"></select><br>到达地: <selectid="state1"></select>  <selectid="country1"></select>  <selectid="city1"></select></body>

functionlinkage(){} $(function(){ //linkage.init("state","country","city"); }); linkage.init=function(levelOne,levelTwo,levelThree){ linkage.data=[]; levelOne="#"+levelOne; levelTwo="#"+levelTwo; levelThree="#"+levelThree; varhtml=""; varurl="linkage.action";//访问地址 //JQuery访问数据 $.getJSON(url,function(data){ linkage.data=data; $(levelOne).html(linkage.getOptionHtmlByLevel(1));//洲区域信息 $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息 $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 //为下拉levelOne框绑定onchange事件 $(levelOne).change(function(){ $(levelTwo).html(linkage.getOptionHtmlById($(levelOne).val()));//国家信息 $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 }); //为下拉levelTwo框绑定onchange事件 $(levelTwo).change(function(){ $(levelThree).html(linkage.getOptionHtmlById($(levelTwo).val()));//城市信息 }); }); }; /** *获得下拉框的选项html *@paramdata *@returnhtml */linkage.getOptionHtml=function(data){ varhtml=""; html="<optionvalue="+data.id+">"+data.locationName+"</option>"; returnhtml; }; /** *根据副ID查找数据 *@paramsubId *@returnhtml */linkage.getOptionHtmlById=function(subId){ varhtml=""; for(i=0;i<linkage.data.length;i++){ if(linkage.data[i].subId==subId){ html+=linkage.getOptionHtml(linkage.data[i]); } } returnhtml; }; /** *根据区域级别查找数据 *@paramlevel *@returnhtml */linkage.getOptionHtmlByLevel=function(level){ varhtml=""; for(i=0;i<linkage.data.length;i++){ if(linkage.data[i].locationLevel==level){ html+=linkage.getOptionHtml(linkage.data[i]); } } returnhtml; };

publicvoidgetAllLocationInfo(){ List<LocationBean>locationList=this.linkageService.findAllLocation(); HttpServletResponseresponse=(HttpServletResponse)ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE); HttpServletRequestrequest=(HttpServletRequest)ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST); try{ request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); JSONArrayjson=JSONArray.fromObject(locationList); response.getWriter().write(json.toString()); }catch(IOExceptione){ //TODOAuto-generatedcatchblock e.printStackTrace(); } }

注意：此用到了JSON转换包

jar包：json-lib-0.4.jar,commons-beanutils.jar