jquery插件-cityselect.js扩展(支持4层联动)

<p>省市区联动下拉效果在WEB中应用非常广泛，尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述，扩展的jQuery插件cityselect.js,支持四层的json遍历（jquery的插件支持三层），通过读取JSON数据，实现无刷新动态下拉省市二（三）（四）级联动效果。</p><img src="select.png"/><h2>二：插件参数<br /></h2><table cellpadding="0" cellspacing="0" border="0" width="488"><tbody><tr>    <td  height="26" width="75">参数名</td>    <td  width="113">默认值</td>    <td  width="81">字符类型</td>    <td  width="68">使用频率</td>    <td  width="151">释义说明</td></tr><tr>    <td height="21">url</td>    <td>js/city.min.js</td>    <td>string</td>    <td><span></span>常用</td>    <td>省市数据josn文件路径</td></tr><tr>    <td height="21">prov</td>    <td>null</td>    <td>string</td>    <td>常用</td>    <td>默认省份</td></tr><tr>    <td height="21">city</td>    <td>null</td>    <td>string</td>    <td>常用</td>    <td>默认城市</td></tr><tr>    <td height="21">dist</td>    <td>null</td>    <td>string</td>    <td>常用</td>    <td>默认地区（县）</td></tr><tr>    <td height="21">street</td>    <td>null</td>    <td>boolean</td>    <td>常用</td>    <td>街道</td></tr><tr>    <td height="21">nodata</td>    <td>null</td>    <td>string</td>    <td>常用</td>    <td>无数据状态</td></tr><tr>    <td height="21">required</td>    <td>true</td>    <td>boolean</td>    <td>常用</td>    <td>必选项</td></tr></tbody></table><h2>三：最简使用教程<br /></h2><p>HTML代码</p><p>1、首先在head中载入jquery库和cityselect插件。</p><pre class="prettyprint lang-js"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.cityselect.js"></script></pre><p>2、接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist、street，分别表示省、市、区（县）、街道四个下拉框。注意如果只想实现省、市、区（县）三级联动，则去掉第四个street的select即可；如果只想实现省市二级联动，则去掉第三个dist的select和去掉第四个street的select即可。    加</br>之后样式变成纵列！city.min.js放到<strong> jquery.cityselect.js</strong> 所在的数据库中，千万不要丢失！</p><pre class="prettyprint lang-html"><div id="city"> <select class="prov"></select></br><select class="city" disabled="disabled"></select></br><select class="dist" disabled="disabled"></select></br><select class="street" disabled="disabled"></select></div> </pre><p>3、调用cityselect插件非常简单，直接调用 </p><pre class="prettyprint lang-js"><script type="text/javascript">    $(function(){        $("#city").citySelect();     });</script></pre><p>自定义参数调用，设置默认省市区。</p><pre class="prettyprint lang-js"><script type="text/javascript">   $("#city").citySelect({         url:"js/city.min.js",         prov:"湖南", //省份        city:"长沙", //城市        dist:"岳麓区", //区县        nodata:"none" //当子集无数据时，隐藏select   }); </script></pre><p>当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。categorySelectStr为后台封装的字符串型json数据，pname、sname、tname、fname为report的属性值。</p><pre class="prettyprint lang-js"><script type="text/javascript">$(function(){$("#city").citySelect({url:{"citylist":${categorySelectStr}},prov:"${report.pname}",city:"${report.sname}",dist:"${report.tname}",street:"${report.fname}",nodata:"none"});});</script></pre><p>4、后台封装json的代码，得到4个集合</p><pre class="prettyprint lang-html">public String getFourCategoryJson() {String ret = "";    String sql = "select t1.* from (select PID ID,'1' PID,'1' lev from T_VP_STAT_NAV_NEW_PID where lev='1' group by PID " union all select SPID ID,PID,'2' lev from T_VP_STAT_NAV_NEW_PID where lev='2' and SPID!='-1' and PID in (SELECT PID from T_VP_STAT_NAV_NEW_PID ) group by          SPID,PID  union all  select TPID ID,SPID PID,'3' lev from T_VP_STAT_NAV_NEW_PID where lev='3' and TPID!='-1' and SPID in (SELECT SPID from T_VP_STAT_NAV_NEW_PID ) group          by TPID,SPID  union all  select FPID ID,TPID PID,'4' lev from T_VP_STAT_NAV_NEW_PID where lev='4' and FPID!='-1' and TPID in (SELECT TPID from T_VP_STAT_NAV_NEW_PID ) group          by FPID,TPID) t1  order by t1.lev";List<Map<String, Object>> list = query(sql);List<String> categoryList = new ArrayList<String>();Map<String, List<String>> secondcategoryListMap = new HashMap<String, List<String>>();Map<String, List<String>> thirdcategoryListMap = new HashMap<String, List<String>>();Map<String, List<String>> fourthcategoryListMap = new HashMap<String, List<String>>();for (Map<String, Object> map : list) {String id = map.get("ID") + "";String lev = map.get("LEV") + "";String pid = map.get("PID") + "";if ("1".equals(lev)) {categoryList.add(id);secondcategoryListMap.put(id, new ArrayList<String>());}if ("2".equals(lev)) {if (secondcategoryListMap.containsKey(pid)) {List<String> tempList = secondcategoryListMap.get(pid);tempList.add(id);thirdcategoryListMap.put(id, new ArrayList<String>());}}if ("3".equals(lev)) {if (thirdcategoryListMap.containsKey(pid)) {List<String> tempList = thirdcategoryListMap.get(pid);tempList.add(id);fourthcategoryListMap.put(id, new ArrayList<String>());}}if ("4".equals(lev)) {if (fourthcategoryListMap.containsKey(pid)) {List<String> tempList = fourthcategoryListMap.get(pid);tempList.add(id);}}}ret = ReportUtil.getFourSelectJoson(categoryList, secondcategoryListMap, thirdcategoryListMap, fourthcategoryListMap);return ret;}}</pre><p>5、把4个集合封装成json，最后转换为字符串。</p><pre class="prettyprint lang-js">public static String getFourSelectJoson(List<String> select1List, Map<String, List<String>> select2ListMap,        Map<String, List<String>> select3ListMap, Map<String, List<String>> select4ListMap) {String ret = "";if (select1List != null && select2ListMap != null && select3ListMap != null && select4ListMap != null) {List<Map<String, Object>> jsonList = new ArrayList<Map<String, Object>>();// 添加类型 "所有" 和汇总{Map<String, Object> select1Map = new HashMap<String, Object>();jsonList.add(select1Map);select1Map.put("p", "汇总");List<Map<String, Object>> select2List = new ArrayList<Map<String, Object>>();select1Map.put("c", select2List);Map<String, Object> select2Map = new HashMap<String, Object>();select2List.add(select2Map);select2Map.put("n", "汇总");List<Map<String, Object>> select3List = new ArrayList<Map<String, Object>>();select2Map.put("a", select3List);Map<String, Object> select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "汇总");List<Map<String, Object>> select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);Map<String, Object> select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select1Map = new HashMap<String, Object>();jsonList.add(select1Map);select1Map.put("p", "所有");select2List = new ArrayList<Map<String, Object>>();select1Map.put("c", select2List);select2Map = new HashMap<String, Object>();select2List.add(select2Map);select2Map.put("n", "汇总");select3List = new ArrayList<Map<String, Object>>();select2Map.put("a", select3List);select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "汇总");select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select2Map = new HashMap<String, Object>();select2List.add(select2Map);select2Map.put("n", "所有");select3List = new ArrayList<Map<String, Object>>();select2Map.put("a", select3List);select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "汇总");select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "所有");select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "所有");}if (select1List.size() > 0) {for (String select1 : select1List) {Map<String, Object> select1Map = new HashMap<String, Object>();jsonList.add(select1Map);select1Map.put("p", select1);List<Map<String, Object>> select2List = new ArrayList<Map<String, Object>>();select1Map.put("c", select2List);{Map<String, Object> select2Map = new HashMap<String, Object>();select2List.add(select2Map);select2Map.put("n", "汇总");List<Map<String, Object>> select3List = new ArrayList<Map<String, Object>>();select2Map.put("a", select3List);Map<String, Object> select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "汇总");List<Map<String, Object>> select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);Map<String, Object> select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select2Map = new HashMap<String, Object>();select2List.add(select2Map);select2Map.put("n", "所有");select3List = new ArrayList<Map<String, Object>>();select2Map.put("a", select3List);select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "汇总");select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "所有");select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "所有");}List<String> select2s = select2ListMap.get(select1);for (String select2 : select2s) {Map<String, Object> select2Map = new HashMap<String, Object>();select2List.add(select2Map);select2Map.put("n", select2);List<Map<String, Object>> select3List = new ArrayList<Map<String, Object>>();select2Map.put("a", select3List);{Map<String, Object> select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "汇总");List<Map<String, Object>> select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);Map<String, Object> select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", "所有");select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "所有");}List<String> select3s = select3ListMap.get(select2);for (String select3 : select3s) {Map<String, Object> select3Map = new HashMap<String, Object>();select3List.add(select3Map);select3Map.put("s", select3);List<Map<String, Object>> select4List = new ArrayList<Map<String, Object>>();select3Map.put("k", select4List);{Map<String, Object> select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "汇总");select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", "所有");}List<String> select4s = select4ListMap.get(select3);for (String select4 : select4s) {Map<String, Object> select4Map = new HashMap<String, Object>();select4List.add(select4Map);select4Map.put("t", select4);}}}}}JSONArray jsonObject = JSONArray.fromObject(jsonList);ret = jsonObject.toString();}System.out.println("ret=null");return ret;}</pre></article></div></section></div>