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

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

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

提供国内省市县数据（数据来源：basecss/cityData Date: 2014.03.31）

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

接着来看看我写的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>

这个时候当然少不了效果图咯！

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    Jquery多选下拉列表插件jquery multiselect功能介绍及使用

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的介绍,不少童鞋都问了这么个问题,怎么获取选中的值?真是个好问题,因为我在看demo的时候也发现了这个问题,呵呵! 先简单说说这个插件: jquery-multiselect 基于Jquery-ui的组件体系. 所以使用它的时候,先得导入jquery-ui相关的js和css哦 特性 •支持点击labe

  • jquery select插件异步实时搜索实例代码

    jquery select插件异步实时搜索实例代码

    一.先看看效果. 二.做此插件的原因. 1.数据量过大(几千.几万条),无法一次性全部加载. 2.现有插件各不相同,无法满足功能需求. 3.美观性,可控性不足. 三.如何使用. 1.html和js <select id="unit"></select> <script type="text/javascript" src="/demo/thirdparty/jquery/jquery-1.8.3.min.js">

  • jQuery扁平化风格下拉框美化插件FancySelect使用指南

    FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中有某个选项没有值,该插件会使用某种占位文字来代替它. 默认情况下,FancySelect 在 iOS 设备上仅使用原生

  • lyhucSelect基于Jquery的Select数据联动插件

    lyhucSelect基于Jquery的Select数据联动插件

    数据源: 复制代码 代码如下: var areaInfo = new Array(); areaInfo[0] = new Array(); areaInfo[0][0]="1"; areaInfo[0][1]="Beijing"; areaInfo[0][2]="0"; areaInfo[0][3]="0"; areaInfo[1] = new Array(); areaInfo[1][0]="2"; a

  • Jquery插件之打造自定义的select标签

    Jquery插件之打造自定义的select标签

    首先看下效果 复制代码 代码如下: <head> <title></title> <link type="text/css" rel="Stylesheet" href="JQSelect.css" /> <script type="text/javascript" src="jquery-1.2.6.js"></script> <

  • jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)

    Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 效果展示       源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet"

  • JQuery扩展插件Validate—6 radio、checkbox、select的验证

    JQuery扩展插件Validate—6 radio、checkbox、select的验证

    效果如下所示: 解决这个问题的办法是将错误信息指定到一个特定的位置,validate()方法的参数中可以进行自定义,示例代码如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法, //验证

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

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

    随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点需要学

  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 实现效果:当选择大类时,小类下拉框里的选项内容也随着改变. 实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类,第二个是小类.大类的值可以是预先写好,也可以是从数据库读取. <lab

  • Yii实现的多级联动下拉菜单

    本文实例讲述了Yii实现的多级联动下拉菜单.分享给大家供大家参考,具体如下: 1. 视图文件 <?php echo CHtml::activeDropDownList($model,'zmg_id',MemGroup::model()->getMemGroup(),array( 'class'=>'s_ipt w_120', 'empty'=>'请选择会员组', 'ajax' =>array( 'type'=>'GET', 'url'=>CController::

  • javascript实现多级联动下拉菜单的方法

    本文实例讲述了javascript实现多级联动下拉菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var arrItems1 = new Array(); var arrItemsGrp1 = new Array(); arrItems1[3] = "列二"; arrItemsGrp1[3] = 1; arrItems1[4] = &qu

  • zTree插件之多选下拉菜单实例代码

    zTree插件之多选下拉菜单实例代码css和js 复制代码 代码如下: <!--ztree树结构--><link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css"><link rel="stylesheet" type="text/css" href="assets/ztre

  • JS实多级联动下拉菜单类，简单实现省市区联动菜单！

    作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.

  • jQuery多级联动下拉插件chained用法示例

    本文实例讲述了jQuery多级联动下拉插件chained用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jQuery插件实现多级联动菜单效果

    jQuery插件实现多级联动菜单效果

    开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需

  • jquery多级树形下拉菜单的实例代码

    效果图: 使用方法 (1)引入 jQuery 包,下载地址 (2)引入 zTree 包,下载地址 (3)引入 tree-select.js (4)$("#id").treeSelect(data); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TreeSelect</title>

  • jQuery简单实现两级下拉菜单效果代码

    jQuery简单实现两级下拉菜单效果代码

    本文实例讲述了jQuery简单实现两级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款两级下拉菜单,jquery插件版,在IE6/IE7/IE8下运行良好,在本示例中,菜单仅显示了四组,不过原理是一样的,菜单较长的话直接复制其中一组就行了,直到满足你的应用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-slideout-menu-codes/ 具体代码如下: <!DOCTYPE html PUBL

随机推荐