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

最新推荐文章于 2022-11-19 23:13:54 发布
最新推荐文章于 2022-11-19 23:13:54 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： jquery插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011512020/article/details/43193407
版权 
<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>

zhujianan_java
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js城市选择控件cityselect.js特效代码
03-20
js城市选择控件cityselect.js，支持中文首字母拼音输入本地搜索。
jquery.cityselect.js城市插件
shengmeshi的博客
07-24 3119
jquery.cityselect.js城市插件
jquery.cityselect.js
loveMaitekai的博客
10-18 792
/* Ajax 三级省市联动 http://code.ciaoca.cn/ 日期：2012-7-18 settings 参数说明 ----- url:省市数据josn文件路径 prov:默认省份 city:默认城市 dist:默认地区（县） nodata:无数据状态 required:必选项 ------------------------------ */ (function($){ $.f
JS下拉框实现省市联动
LY
04-23 6123
效果图： 选择省份匹配城市： 给定省份和城市 思路： 省份数组下标对应相应的城市 循环设置省份列表 selectCity()根据参数pro得到省份下标设置城市列表var index=pro.selectedIndex-1; 已知省份：设置selected，根据下标得出所有城市列表 已知省份，城市：根据已知省份的下标，得出所有对应城市，查找已知城市，设置selected if (citys...
javascript实现中国各大城市快速下拉选择
weixin_33887443的博客
01-11 785
如果开发中遇到需要输入城市名的页面，那么这个特效可以帮助快速输入。这是一个纯js实现的效果，可以快速的输入城市名称，支持鼠标点击选择，输入城市的拼音或者拼音首字母，使用方便。可以在输入框中通过点击生成包含中国各个城市的下拉列表，进行快速选择，快速切换定位。体验效果：http://hovertree.com/texiao/js/36/HTML文件代码如下：...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_
10-03
jquery 3.5.1 for javascript developers
jquery插件star-rating.js实现星级评分特效
12-09
jquery星级评分插件star-rating.js下载插件，点击星星或者心的左边，就是半分，右边就是1分。点击减号，分数置为0。不兼容IE8以下的浏览器。 演示图 使用方法 第一步、引入下面的代码： 代码如下: <link href=...
jquery-3.5.0.js jquery-3.5.0.min.js.zip
08-17
jquery-3.5.0.js jquery-3.5.0.min.js.zip
jquery插件jquery-ui-1.8.18.custom.min.js及css文件
09-02
jquery插件jquery-ui-1.8.18.custom.min.js
省市区联动插件jquery.cityselect.js
06-01
jQuery+JSON的省市三级、二级联动插件
lang.js:lang.js 是一个简单的库，可帮助您处理多语言站点
05-29
语言.js lang.js 是一个简单的库，可帮助您处理多语言站点。 查看用户语言 使用它来查看主要用户语言 navigator . lang // Console returns your favourite language 检查用户语言 使用它来检查输入语言是否是主要语言 navigator . islang ( "en" ) // Console returns true if user use english 用户使用特定语言时的回调函数 将此用于需要特定用户语言的回调函数 navigator . iflang ( "en" , callback ) // For example, if user use english and callback returns true, the console returns true, too. 小心 仅当您想了解用户语言而不是用户
layui select城市联动demo所需的citys.js
07-09
layui 做的select城市联动小demo 所需js 页面代码可找我的博客
citySelect.js
05-22
form表单中省份 市 地区下拉菜单，只需在html页面引入citySelect.js,页面加载时，创建PCAS函数。
JavaScript实现select下拉菜单省份和城市的级联菜单
syy的博客
11-19 2831
使用JavaScript实现数组与select标签结合使用对省份及对应的城市的显示
【js组件】修改cityselect以适应项目（2）
一名普通码农的菜地
02-17 4071
经过一段时间整理修改，终于将相关文件修改好，核心的文件如下： /* Ajax 三级省市联动 http://code.ciaoca.cn/ 日期：2012-7-18 http://www.helloweba.com/view-blog-188.html settings 参数说明 ----- data:省市数据的json数据---因为可能是我的全国地区数据有点大，400kb以
Javascript 实现城市选择控件
cchangcs
08-24 3717
Javascript 实现城市选择控件本篇博文主要介绍使用Javascript实现城市选择： 首先是JSP的内容，如下所示：<%@ page language="java" import="java.util.*" import="com.baiyaotech.bean.*" pageEncoding="gbk" contentType="text/html; charset=gbk"%>&l
jquery.cityselect.js基于jQuery+JSON的省市-自定义联动效果
Sandkin的博客
06-19 8037
一、插件介绍 最早做省市联动的时候都特别麻烦，后来在helloweba的一篇文章中看到这个插件，很不错的，后来就一直用了。 省市区联动下拉效果在WEB中应用非常广泛，尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述，利用jQuery插件，通过读取JSON数据，实现无刷新动态下拉省市二（三）级联动效果。 de
jquery.tablesorter.js:638 Uncaught TypeError: Cannot read properties of undefined (reading 'type') at multisort (jquery.tablesorter.js:638:54) at HTMLTableElement.<anonymous> (jquery.tablesorter.js:855:45) at HTMLTableElement.dispatch (jquery-1.7.2.js:3332:9) at HTMLTableElement.eventHandle (jquery-1.7.2.js:2941:28) at Object.trigger (jquery-1.7.2.js:3210:12) at HTMLTableElement.<anonymous> (jquery-1.7.2.js:3869:17) at Function.each (jquery-1.7.2.js:660:20) at init.each (jquery-1.7.2.js:271:17) at init.trigger (jquery-1.7.2.js:3868:15) at HTMLTableElement.<anonymous> (jquery.tablesorter.js:869:31) 这个报错啥原因
最新发布
07-13
这个错误通常是由于在使用 jQuery TableSorter 插件时出现了问题。根据报错信息，错误发生在 `multisort` 函数的第 638 行，指示无法读取未定义的属性 `'type'`。 我无法提供具体的解决方案，因为我没有你的代码或更多的上下文信息。但是，以下是一些可能的原因和解决方案： 1. 确保正确加载了 jQuery 和 TableSorter 插件。在你的 HTML 文件中，确保先引入 jQuery 库，然后再引入 TableSorter 插件。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/jquery.tablesorter.js"></script> ``` 2. 检查 jQuery 和 TableSorter 的版本兼容性。确保使用的 TableSorter 插件版本与你的 jQuery 版本兼容。有时，不同版本的插件可能需要特定版本的 jQuery 才能正常工作。你可以查看 TableSorter 插件的文档或官方网站，了解它所需的最低 jQuery 版本。 3. 确保正确初始化 TableSorter 插件。在加载完 TableSorter 插件之后，在你的 JavaScript 代码中使用以下方式初始化 TableSorter： ```javascript $(document).ready(function() { // 选择要应用 TableSorter 的表格，并调用 tablesorter() 方法 $("#your-table-id").tablesorter(); }); ``` 请将上述代码中的 `#your-table-id` 替换为你实际需要应用 TableSorter 插件的表格的 ID 或选择器。 如果以上解决方案都不能解决问题，请提供更多关于你的代码和环境的详细信息，以便我能够更好地帮助你解决这个问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值