本文实例讲述了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插件,本站还提供了如下的下载地址:
http://www.maopiaopiao.com/jiaoben/41472.html
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。