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

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. 第13章、布局Layouts之RelativeLayout相对布局（从零開始学Android）

    RelativeLayout相对布局 RelativeLayout是一种相对布局,控件的位置是依照相对位置来计算的,后一个控件在什么位置依赖于前一个控件的基本位置,是布局最经常使用,也是最灵活的一种布 ...

  2. NET Platform Standard

    NET Platform Standard 相关博文:ASP.NET 5 Target framework dnx451 and dnxcore50 .NET Platform Standard:ht ...

  3. chfn,chsh,last,login,mail ,mesg ,talk,wall,write,nice ,pstree ,renice,skill ,expr ,reset,tset,compress ,lpd ,lpq ,lpr ,lprm,fdformat ,mformat ,mkdosf

    名称:chfn 使用权限:所有使用者 用法:shell>> chfn 说明:提供使用者更改个人资讯,用于finger and mail username 范例: shell>> ...

  4. HDU 4296 Buildings （YY）

    题意: 给定N个物体,每个物体有两个参数w,s.   w代表它自身的重量: s代表它的强度.现在要把这些物体叠在一起,会产生一个PDV值. PDV解释:(Σwj)-si, where (Σwj) st ...

  5. OpenCv调用摄像头拍照代码

    近期在研究OpenCv对摄像头的调用.现将代码贴出,供大家批评指正. 1.申明 #include"./opencv2/opencv.hpp" #ifdef _DEBUG #prag ...

  6. SQL ---指令实例语句

    1 1 create database+数据库名字 创建数据库 2 2 create table+表的名字 创建表 3 表中的操作: 4 3 insert into 表名 (列名1,列名2··)val ...

  7. ActiveX 暴漏你全部信息的可怕的插件！

    近期在项目中常常接触ActiveX控件,对于这个名词相信仅仅要是上网看视频的用户一定都会遇到adobe更新或者载入的提示,这就是一个ActiveX控件.一直以为Active控件是处理复杂的页面逻辑提供 ...

  8. 【图像处理】Bilinear Image Scaling

    Bilinear image scaling is about the same as nearest neighbor image scaling except with interpolation ...

  9. 专注UI——有用技术：模糊搜索

    在如今的项目中.须要做模糊搜索,在曾经技术的基础上非常快得完毕了第一版.大家先看看第一版的效果,我们一会做评论: 0基础: 我们可能部分源代码(附件中会有所有源代码) <span style=& ...

  10. Jobbox.io（职位盒子）: 新兴的面向技术人才的职场招聘众推平台

    人才招聘市场一个主要问题在于猎头中介费昂贵.这对于大公司而言,或可接受. 但对于海量小微企业而言招聘成本和效率之间的平衡是非常大的一个问题. 现在产品猎场(Product Hunt)上出现了一些新的招 ...