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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
vue+高德地图写地图选址组件的方法
May 18 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
Bootstrap每天必学之表单
2015/11/23 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
webpack中如何加载静态文件的方法步骤
2019/05/18 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
说一说Python logging
2016/04/15 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python IDLE清空窗口的实例
2018/06/25 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
12岁生日感言
2014/01/21 职场文书
公开服务承诺制度
2014/03/26 职场文书
商场促销活动策划方案
2014/08/18 职场文书
房产协议书范本
2014/10/18 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL