jQuery多级联动下拉插件chained用法示例
本文实例讲述了jQuery多级联动下拉插件chained用法。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>ChainedSelect/PulldownDemo</title>
<metaname="generator"content="fingers"/>
<styletype="text/css">
#sidebar{
width:0px;
}
#content{
width:770px;
}
#button,#button-remote{
display:none;
}
</style>
</head>
<body>
<divid="wrap">
<divid="header">
<p>
<h1>Chained</h1><br/>
<small>ChainedselectpluginforjQuery</small>
<ulid="nav">
<liid="first"><ahref="/"class="active">weblog</a></li>
<li><ahref="/projects"class="last">projects</a></li>
<!--
<li><ahref="/cv"class="last">cv</a></li>
-->
</ul>
</p>
</div>
<divid="content">
<divclass="entry">
<h3>jquery.chained.js</h3>
<form>
<selectid="mark">
<optionvalue="">--</option>
<optionvalue="bmw">BMW</option>
<optionvalue="audi">Audi</option>
</select>
<selectid="series">
<optionvalue="">--</option>
<optionvalue="series-1"class="bmw">1series</option>
<optionvalue="series-3"class="bmw">3series</option>
<optionvalue="series-5"class="bmw">5series</option>
<optionvalue="a1"class="audi">A1</option>
<optionvalue="a3"class="audi">A3</option>
<optionvalue="s3"class="audi">S3</option>
</select>
<selectid="model">
<optionvalue="">--</option>
<optionvalue="3-doors"class="series-1bmw">3doors</option>
<optionvalue="5-doors"class="series-1">5doors</option>
<optionvalue="coupe"class="series-1series-3series-6">Coupe</option>
<optionvalue="cabrio"class="series-1series-3series-6">Cabrio</option>
<optionvalue="sedan"class="series-3series-5series-7">Sedan</option>
<optionvalue="touring"class="series-3series-5">Touring</option>
<optionvalue="sedan"class="a1a3s3">Sedan</option>
<optionvalue="sportback"class="a3">Sportback</option>
<optionvalue="cabriolet"class="a3">Cabriolet</option>
<optionvalue="avant"class="a1">Avant</option>
<optionvalue="allroad"class="a3">Allroad</option>
<optionvalue="coupe"class="s3">Coupe</option>
</select>
<selectid="engine">
<optionvalue=""width="150"></option>
<optionvalue="25-petrol"class="series-3bmw">2.5petrol</option>
<optionvalue="30-petrol"class="series-3a3">3.0petrol</option>
<optionvalue="30-diesel"class="coupe">3.0diesel</option>
</select>
</form>
</div>
<divid="sidebar">
</div>
</div>
<divid="footer">
</div>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"charset="utf-8"></script>
<scriptsrc="jquery.chained.js"type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript"charset="utf-8">
$(function(){
/*Forjquery.chained.js*/
$("#series").chained("#mark");
$("#model").chained("#series,#mark");
$("#engine").chained("#series,#model,#mark");
})
</script>
<scriptsrc="http://www.google-analytics.com/urchin.js"type="text/javascript"></script>
<scripttype="text/javascript">
_uacct="UA-190966-1";
urchinTracker();
</script>
</body>
</html>
PS：关于chained插件，本站还提供了如下的下载地址：
https://www.nhooo.com/jiaoben/41472.html
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。