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 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
js保留两位小数方法总结
Jan 31 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
vue中路由跳转不计入history的操作
Sep 21 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
三种php连接access数据库方法
2013/11/11 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
PHP 裁剪图片
2021/03/09 PHP
js验证表单第二部分
2006/11/25 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
javascript操作数组详解
2014/12/17 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
Vue基础配置讲解
2019/11/29 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
超市国庆节促销方案
2014/02/20 职场文书
社区党务公开实施方案
2014/03/18 职场文书
中秋寄语大全
2014/04/11 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
初一语文教学反思
2016/03/03 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android