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

 更新时间:2016年08月20日 10:43:06   作者:xiangqian0505  
这篇文章主要介绍了jQuery多级联动下拉插件chained用法,结合实例形式分析了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">
<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://www.jb51.net/jiaoben/41472.html

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

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

相关文章

  • jQuery选择器全面总结

    jQuery选择器全面总结

    本篇文章主要是对jQuery选择器进行了全面的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • jquery.ajax的url中传递中文乱码问题的解决方法

    jquery.ajax的url中传递中文乱码问题的解决方法

    本篇文章主要是对jquery.ajax的url中传递中文乱码问题的解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】

    jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】

    这篇文章主要介绍了jQuery实现点击后高亮背景固定显示的菜单效果,可实现鼠标点击菜单项后呈现出鼠标滑过一样的背景高亮显示效果,同时该显示效果固定不变,需要的朋友可以参考下
    2016-09-09
  • jquery一般方法介绍 入门参考

    jquery一般方法介绍 入门参考

    对于刚开始接触jquery的朋友是个不错学习参考,对于一些方法的使用也给出了说明。
    2011-06-06
  • jQuery 跨域访问问题解决方法

    jQuery 跨域访问问题解决方法

    浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js util 的方式解决二级域名跨域访问的问题.
    2009-12-12
  • jquery中常用的函数和属性详细解析

    jquery中常用的函数和属性详细解析

    本篇文章主要是对jquery中常用的函数和属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • jQuery EasyUI 获取tabs的实例解析

    jQuery EasyUI 获取tabs的实例解析

    左边tree,右边tabs。点击tree增加相应的tabs。下面通过一段代码给大家解析,需要的朋友参考下吧
    2016-12-12
  • jQuery对指定元素中指定字符串进行替换的方法

    jQuery对指定元素中指定字符串进行替换的方法

    这篇文章主要介绍了jQuery对指定元素中指定字符串进行替换的方法,涉及jQuery针对字符串的匹配与替换的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • jquery插件实现扫雷游戏(2)

    jquery插件实现扫雷游戏(2)

    这篇文章主要为大家详细介绍了jquery插件实现扫雷游戏第二篇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • jQuery中ajax错误调试分析

    jQuery中ajax错误调试分析

    jQuery中把ajax封装得非常好。但是日常开发中,我偶尔还是会遇到ajax报错。本文进行简单分析一下ajax报错。需要的朋友可以参考下
    2016-12-12

最新评论