随着电商热门，这种多层次的互动更充分地体现在下拉菜单，最明显的是多级联动地址下拉选择，因此，这里是一个简单的分享

jQuery cxSelect 多级联动下拉菜单

cxSelect 它是基于 jQuery 多级联动菜单插件。它适用于各省、动菜单。

列表数据通过 AJAX 获取（须要在server环境执行），也能够使用变量自己定义，数据内容使用 JSON 格式。

提供国内省市县数据（数据来源：basecss/cityData Date: 2014.03.31）

个人一直都有习惯，当有新知识点须要学习的时候。做得第一件事情绝对是看API。然后在看Demo！所以先把API附上：

接着来看看我写的Demo吧，真的非常easy。！

。直接上代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>jQuery_cxSelect</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>

	<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>

  </head>

  <body>

  	<!--

	select 必须放在元素 id="element_id"（city） 的内部。不限层级

	select 的 class 随意取值，也能够附加多个 class，如 class="province otherclass"，在调用时仅仅须要输入当中一个就可以，可是不能反复

	如需设置 select 默认值。加上 data-value 属性。例：<select class="province" data-value="浙江省"></select>

	-->

  	<fieldset id="city">

		<legend>设置默认值及选项标题</legend>

		<p>所在地区：

			<select class="province" data-value="上海市" data-first-title="选择省" disabled="disabled"></select>

			<select class="city" data-value="浦东新区" data-first-title="选择市" disabled="disabled"></select>

			<select class="area" data-value="西湖区" data-first-title="选择地区" disabled="disabled"></select>

		</p>

	</fieldset>

  </body>

  <script type="text/javascript">

	  	/* 使用 JSON 格式

		 * v : 设置 option 的值（可选项。未设置则使用 n）

		 * n : 设置 option 的文本

		 * s : 当前选项的子集

		 */

		$.cxSelect.defaults.url = "data/cityData.min.json";

		$("#city").cxSelect({

			selects : ["province", "city", "area"],

			nodata : "none"

		});

  </script>

</html>

这个时候当然少不了效果图咯！

在这里简单的例子，作为更复杂。它会尽情地发挥它！

版权声明：本文博客原创文章。博客，未经同意，不得转载。

jQuery cxSelect 多级联动下拉菜单的更多相关文章

  1. 多级联动下拉菜单--cxSelect

    jquery cxSelect插件 github地址:https://github.com/ciaoca/cxSelect demo地址:http://code.ciaoca.com/jquery/c ...

  2. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  3. JQuery Easyui/TopJUI 创建多级联动下拉框（纯HTML实现！！！）

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  4. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  5. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jQuery cxSelect 联动下拉菜单

    插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto ...

  7. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  8. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  9. bootstrap 多级联动下拉框

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. Entity - 使用EF框架进行增删改查 - 模型先行

    模型先行:先创建数据库实体模型,然后再进行数据库的增删改查. 基本步骤是不变的,可参照 <Entity - 使用EF框架进行增删改查 - 数据库先行> 其中的不同是,在创建数据库实体模型的 ...

  2. UVA 725 – Division

    Description   Write a program that finds and displays all pairs of 5-digit numbers that between them ...

  3. 终于懂了：TWinControl.DefaultHandler里的CallWindowProc(FDefWndProc)还挺有深意的，TButton对WM_PAINT消息的处理就是靠它来处理的（以前不明白为什么总是要调用inherited，其实就是没有明白TWinControl.DefaultHandler的真正用处）

    我忽然发现:TButton既没有处理WM_PAINT,又没有Paint()或者PaintWindow(),那么它是什么时候被绘制的? Form1上放2个TButton,然后设置代码: procedur ...

  4. TVS參数具体解释及选型应用

    一.首先了解TVS管的參数,我们以littelfuse的5.0SMDJ系列为例. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGcybGg=/font/ ...

  5. QMediaPlayer的duration问题

    遇到了一个坑QMediaPlayer::duration的坑. 这个坑是当你setMedia之后, 直接使用duration获取播放时长会得到0, 出错时候的代码片段例如以下: void MainWi ...

  6. POJ1273_Drainage Ditches(网络流)

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 54887   Accepted: 2091 ...

  7. Hibernate（五）——经典解析一对一关联映射

    前面两篇介绍了多对一.一对多的映射.今天分享下一对一的关联映射关系.有两种策略可以实现一对一的关联映射:主键关联.唯一外键关联. 主键关联——两个表有完全相同的主键值,来表示它们的一对一的关系.数据库 ...

  8. Atitit.jquery 版本号新特性attilax总结

    Atitit.jquery 版本号新特性attilax总结 1. Jq1.4 1 2. 1.5 1 3. 1.6 3 4. Jq1.7 3 ⒉提升了事件委派时的性能有了大幅度的提升.尤其是在ie7下: ...

  9. oracle实现远程连接超简单；枚举与剪枝（）；PowerDesigner生成数据库代码注意里面的双引號，应该去掉

    点击開始,查看netManager,点击面板的监听程序,默认仅仅有地址1且标记着localhost.新建一个地址,输入本机IP,又一次开启监听程序就可以 △△△ * △△ = △△△△ 某3位数乘以2 ...

  10. iOS - NSLog的使用方法

    NSLog的定义 NSLog定义在NSObjCRuntime.h中,如下所示: void NSLog(NSString *format, …); 基本上,NSLog很像printf,同样会在conso ...