登录
当前位置： 首页 > 工具软件 > jQuery LinkedSelects > 使用案例 >

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

海翔宇
2023-12-01 
<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>

 类似资料：

相关阅读

jenkins扩展参数插件groovy脚本jq自己扩展过什么插件？jQuery插件jsonview展示json数据jQuery插件formValidator自定义函数扩展功能实例详解原创jQuery弹出层插件分享

相关文章

Objective-C扩展cvte软件技术支持WSDL 2.0核心，附件和扩展tplink联洲提前批驻外技术支持JavaScript之DOM扩展

相关问答

如何扩展XSD方案以支持SVG？移动谷歌Chrome支持浏览器扩展吗？Electron showOpenDialog不支持macOS上的扩展筛选器java.lang.NoClassDefFoundError： sun/Security/ssl/支持的椭圆曲线扩展Android Gradle插件只支持Kotlin Gradle插件版本

相关文档

如何编写 jQuery 插件Flask 扩展文档汇总Chrome 扩展及应用开发php-ext-xlswriter 高性能 Excel 扩展PHP 扩展开发及内核应用
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.