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 原型继承
Dec 26 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
swiper自定义分页器的样式
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
php实现的在线人员函数库
2008/04/09 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python Queue模块详细介绍及实例
2016/12/27 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python Django的web开发实例(入门)
2019/07/31 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
车祸赔偿收入证明
2014/01/09 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript