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


Posted in Javascript onAugust 20, 2016

本文实例讲述了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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Chained Select / Pulldown Demo</title>
<meta name="generator" content="fingers" />
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
#button, #button-remote {
display: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Chained</h1><br />
<small>Chained select plugin for jQuery</small>
<ul id="nav">
<li id="first"><a href="/" class="active">weblog</a></li>
<li><a href="/projects" class="last">projects</a></li>
<!--
<li><a href="/cv" class="last">cv</a></li>
-->
</ul>
</p>
</div>
<div id="content">
<div class="entry">
<h3>jquery.chained.js</h3>
<form>
<select id="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series">
<option value="">--</option>
<option value="series-1" class="bmw">1 series</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="a1" class="audi">A1</option>
<option value="a3" class="audi">A3</option>
<option value="s3" class="audi">S3</option>
</select>
<select id="model">
<option value="">--</option>
<option value="3-doors" class="series-1 bmw">3 doors</option>
<option value="5-doors" class="series-1">5 doors</option>
<option value="coupe" class="series-1 series-3 series-6">Coupe</option>
<option value="cabrio" class="series-1 series-3 series-6">Cabrio</option>
<option value="sedan" class="series-3 series-5 series-7">Sedan</option>
<option value="touring" class="series-3 series-5">Touring</option>
<option value="sedan" class="a1 a3 s3">Sedan</option>
<option value="sportback" class="a3">Sportback</option>
<option value="cabriolet" class="a3">Cabriolet</option>
<option value="avant" class="a1">Avant</option>
<option value="allroad" class="a3">Allroad</option>
<option value="coupe" class="s3">Coupe</option>
</select>
<select id="engine">
<option value="" width="150"></option>
<option value="25-petrol" class="series-3 bmw">2.5 petrol</option>
<option value="30-petrol" class="series-3 a3">3.0 petrol</option>
<option value="30-diesel" class="coupe">3.0 diesel</option>
</select>
</form>
</div>
<div id="sidebar">
</div>
</div>
<div id="footer">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
/* For jquery.chained.js */
$("#series").chained("#mark");
$("#model").chained("#series,#mark");
$("#engine").chained("#series, #model,#mark");
})
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-190966-1";
urchinTracker();
</script>
</body>
</html>

PS:关于chained插件,本站还提供了如下的下载地址:
https://3water.com/jiaoben/41472.html

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
详解Document.Cookie
Dec 25 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
浅谈angular懒加载的一些坑
Aug 20 #Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 #Javascript
js显示动态时间的方法详解
Aug 20 #Javascript
javascript数字验证的实例代码(推荐)
Aug 20 #Javascript
javascript之IE版本检测超简单方法
Aug 20 #Javascript
基于JavaScript Array数组方法(新手必看篇)
Aug 20 #Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 #Javascript
You might like
PHP过滤黑名单关键字的方法
2014/12/01 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
csdn 博客的css样式 v3
2009/02/24 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
python基础教程之序列详解
2014/08/29 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python中装饰器的一个妙用
2015/02/08 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python实现自动登录
2018/09/17 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
品酒会策划方案
2014/05/26 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书