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的单例模式 (singleton in Javascript)
Jun 11 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 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
关于手调机和数调机的选择
2021/03/02 无线电
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
信息技术课教学反思
2016/02/23 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
详解Node.js如何处理ES6模块
2021/05/15 Javascript
php解析非标准json、非规范json的方式实例
2022/05/10 PHP