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 相关文章推荐
JavaScript数字和字符串转换示例
Mar 26 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
杏林同学录(一)
2006/10/09 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
js传值 判断
2006/10/26 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python实现将内容分行输出
2015/11/05 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
python中p-value的实现方式
2019/12/16 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
AOP的定义以及作用
2013/09/08 面试题
如何利用find命令查找文件
2016/11/18 面试题
最新的互联网创业计划书
2014/01/10 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
导游词之天津古文化街
2019/11/09 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技