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

2019-11-20 09:11:25

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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插件，本站还提供了如下的下载地址：
//www.VeVB.COm/jiaoben/41472.html

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

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

上一篇：JS简单设置下拉选择框默认值的方法

下一篇：浅谈angular懒加载的一些坑