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

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. Jsp中使用数据库连接池.

    原文 Jsp中使用数据库连接池. 1. 在tomcat服务器目录下面的conf中找到一个叫Context.xml的配置文件,在其中加入以下代码 <Resource name="jdbc ...

  2. c#1所搭建的核心基础之类型系统的特征

    类型系统的特征简介 几乎每种编程语言都有某种形式的一个类型系统.类型系统大致被分为:强/弱,安全/不安全,静态/动态,显式/隐式等类型. c#在类型系统世界中的位置 c#1的类型系统是静态的.显式的和 ...

  3. jquery ajax局部加载方法介绍

    [导读] 在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考.例 代码如下复制代码 $ ...

  4. 解决 Android SDK Manager不能下载旧版本的sdk的问题

    解决无法使用Android SDK  Manager下载SDK开发包的解决办法. 当我们在官网下载google的集成ADT,也就是adt-bundle-linux-x86.zip开发包,进行解压, 打 ...

  5. C2B未来：大数据定制

    昨天看到微信SuperSofter写了一篇文章,有感而发.以便备记. 这是一种典型的C2B模式.阿里不仅仅是在与腾讯拼移动.它的电商本土业务也在稳步推进.近期一个里程碑事件是.阿里包下了美的.九阳.苏 ...

  6. FastDFS概要

    本篇文章是我上级老大所写. 留在这里为了不弄丢. FastDFS是一款开源的轻量级分布式文件系统 纯C实现,支持Linux, FreeBSD等UNIX系统 类google FS, 不是通用的文件系统, ...

  7. paip.odbc DSN的存储与读取

    paip.odbc DSN的存储与读取 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net/atti ...

  8. Win7和VS2013上使用Intel的TBB

    源地址:http://www.th7.cn/system/win/201505/103966.shtml http://wenku.baidu.com/link?url=zH7vwmWltWF5R-9 ...

  9. PropertyPlaceholderConfigurer类的使用注意

    如果你在spring的applicationcontext.xml中需要使用属性配置文件,那PropertyPlaceholderConfigurer这个类就是必须的. <bean class= ...

  10. Centos 7 学习之静态IP设置

    原文链接:http://blog.csdn.net/johnnycode/article/details/40624403 本学习主要针对 Centos 7.0.1406 版本进行学习整理! 如果你使 ...