jQuery插件cxSelect多级联动下拉菜单实例解析


Posted in Javascript onJune 24, 2016

随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下
jQuery cxSelect 多级联动下拉菜单
cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。

列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。

提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31)

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

jQuery插件cxSelect多级联动下拉菜单实例解析

接着来看看我写的Demo吧,真的很简单!!!直接上代码:

<%@ 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多级联动下拉菜单实例解析

简单的实例就在这里了,至于要更复杂,那各位就尽情的发挥吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
js密码强度实时检测代码
Mar 02 Javascript
vue如何从接口请求数据
Jun 22 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
js实现简单选项卡功能
Mar 23 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
jQuery下拉框的简单应用
Jun 24 #Javascript
浅谈json取值(对象和数组)
Jun 24 #Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 #Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 #Javascript
JS控制文本域只读或可写属性的方法
Jun 24 #Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 #Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 #Javascript
You might like
德生9700DX电路分析
2021/03/02 无线电
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
python常用运维脚本实例小结
2020/02/14 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python Django搭建网站流程图解
2020/06/13 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
财会专业大学生求职信
2014/09/26 职场文书
信仰观后感
2015/06/03 职场文书
2016年教师新年寄语
2015/08/18 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
MySQL分库分表详情
2021/09/25 MySQL