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

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. 刚開始学习的人制作VMOS场效应管小功放

    VMOS场效应管既有电子管的长处又有晶体管的长处,用它制作的功率放大器声音醇厚.甜美,动态范围大.频率响应好.因此近年来在音响设备中得到了广泛应用. 大功率的场效应管功率放大器.电．路比較复杂.制作和 ...

  2. lastIndexOf方法——获取字符最后的索引

    1.2.20 lastIndexOf方法——获取字符最后的索引 2013-08-29 14:55:18     我来说两句 收藏    我要投稿   本文所属图书 > Java程序开发参考手册 ...

  3. cocos2d-x lua 内存回收

    使用cocos2d-x lua架构,游戏中存在两种内存回收方式. 1.cocos2d-x 本身内存回收 PS:假设在lua在创建一个类,继承cocos2d-x的一个类A,则该A也遵循cocos2d-x ...

  4. vim Diff,Easy,Read-Only 的区别

    我用的是vim 7.4,在windows上面安装完 vim 之后会出现不同的vim图标,gVim ,vim gVim 是在windows下的Gui图形用户界面的的 vim (GUI Vim),支持wi ...

  5. mojo 关闭utf8

    [root@wx03 ~]# cat test.pl use Mojolicious::Lite; use JSON qw/encode_json decode_json/; use Encode; ...

  6. ntohs, ntohl, htons,htonl的比较和详解

    在C/C++写网络程序的时候,往往会遇到字节的网络顺序和主机顺序的问题. 这时就可能用到htons(), ntohl(), ntohs(),htons()这4个网络字节顺序与本地字节顺序之间的转换函数 ...

  7. python 多线程一（lock）

    ''' Created on Jun 17, 2013 @author: smp ''' #-*- coding:utf-8 -*- import threading import time coun ...

  8. All consistent reads within the same transaction read the snapshot established by the first read.

    Session 1: Session 2: mysql> show variables like '%tx_isolation%'; +---------------+------------- ...

  9. vc笔记六

    通知消息(Notification message)是指这样一种消息,一个窗口内的子控件发生了一些 事情,需要通 知父窗口.通知消息只适用于标准的窗口控件如按钮.列表框.组合框.编辑框,以及 Wind ...

  10. cocos2d 游戏开发:Cocos2d v3 &quot;hello world&quot;+显示飞船

    V3 RC4 版本号图片 显示一个飞船 将Chapter1中 SpaceCargoShip.png 文件 加入到项目里面. 代码在 init : CCSprite *spaceCargoShip = ...