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 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
React 父子组件通信的实现方法
Dec 05 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学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python实现遍历数据库并获取key的值
2015/05/17 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
详解python中*号的用法
2019/10/21 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
办理生育手续介绍信
2014/01/14 职场文书
师德个人剖析材料
2014/02/02 职场文书
初中学校军训方案
2014/05/09 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
自主招生学校推荐信
2014/09/26 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
考研英语辞职信
2015/05/13 职场文书
办公室管理规章制度
2015/08/04 职场文书
文明礼仪主题班会
2015/08/13 职场文书