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

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. centOS设为文本启动方式

    centOS图形界面须要点用系统大量的内存和CPU资源,对于server而言,高效率是最重要的,因此将Centos 默认启动改为文本方式. 在终端中输入: vi /etc/inittab 有段说明文字 ...

  2. cocos2d-x 3.0来做一个简单的游戏教程 win32平台 vs2012 详解献给刚開始学习的人们！

    原代码来自于网络,因为cocos2d-x 3.0的资料,的确不多,与曾经版本号的接口非常难对上, 所以网上非常多样例都无法调试,对于新学习cocos2d-x 的同学,难度添加了,所以出一个超具体的样例 ...

  3. 能上QQ无法上网

    不少网友碰到过或亲身经历过电脑QQ还在登录,并且还能正常聊天,但是却打不开网站网页的情况,而当电脑出现能上qq但是打不开网页是由什么原因引起,我们又该如何解决类似的电脑故障呢. 适用范围及演示工具 适 ...

  4. spring boot application properties配置详解

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  5. 【Demo 0008】Java基础-抽象类

    本掌学习要点:       1.  了解抽象类的定义及使用场景:       2.  掌握final修饰的类.方法以及变量作用及用法:       3.  掌握abstract 修饰的类及方法作用及用 ...

  6. Effective C++ 第二版 8) 写operator new 和operator delete 9) 避免隐藏标准形式的new

    条款8 写operator new 和operator delete 时要遵循常规 重写operator new时, 函数提供的行为要和系统缺省的operator new一致: 1)正确的返回值; 2 ...

  7. sublime搜索和替换--正则

    Search and Replace Sublime Text features two main types of search: Search - Single File Search - Mul ...

  8. EFI/GPT探索(为何win7分区时创建100M隐藏分区)

    EFI/GPT探索(为何win7分区时创建100M隐藏分区) 转自 http://blog.tomatoit.net/article.asp?id=348 EFI/GPT是新一代的固件/启动管理技术, ...

  9. VC/MFC ListCtrl 控件功能使用汇总（转）

    以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏.如 ListView_InsertCol ...

  10. Android菜鸟的成长笔记（9）——Intent与Intent Filter（下）

    原文:[置顶] Android菜鸟的成长笔记(9)——Intent与Intent Filter(下) 接着上一篇的内容,下面我们再来看看Intent的Data与Type属性. 一.Data属性与Typ ...