jQuery多級聯(lián)動下拉插件chained用法示例

更新時間：2016年08月20日 10:43:06 作者：xiangqian0505

這篇文章主要介紹了jQuery多級聯(lián)動下拉插件chained用法,結合實例形式分析了jQuery多級聯(lián)動下拉插件chained的功能與基本使用技巧,需要的朋友可以參考下

本文實例講述了jQuery多級聯(lián)動下拉插件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.dhdzp.com/jiaoben/41472.html

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jquery ready(fn)事件使用介紹
當DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)，下面有個示例，不懂的朋友可以學習下
2013-08-08
Jquery通過Ajax訪問XML數(shù)據(jù)的小例子
這篇文章主要介紹了Jquery通過Ajax訪問XML數(shù)據(jù)，有需要的朋友可以參考一下
2013-11-11
jQuery extend()詳解及簡單實例
這篇文章主要介紹了jQuery extend()詳解及簡單實例的相關資料,需要的朋友可以參考下
2017-05-05
深入理解(function(){... })();
很多朋友不清楚(function(){... })();這幾種寫法各代表是什么意思，下面小編通過本教程給大家簡單介紹下(function(){... })();知識，感興趣的朋友跟著小編一起學習吧
2016-08-08
jquery 獲取dom固定元素添加樣式的簡單實例
本篇文章主要是對jquery獲取dom固定元素添加樣式的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
Jquery CheckBox全選方法代碼附js checkbox全選反選代碼
喜歡上了Jquery的簡便、明了···與用JavaScript寫的比起來真的有點差距！
2010-06-06
EasyUI布局高度自適應
這篇文章主要介紹EasyUI高度自適應的問題,比較實用，需要的朋友可以參考下。
2016-06-06
EasyUI的doCellTip實現(xiàn)鼠標放到單元格上提示單元格內(nèi)容
本篇文章主要介紹了easyUI的doCellTip 就是鼠標放到單元格上有個提示的功能，對于Javascript教程感興趣的同學可以參考一下
2016-08-08
jQuery滾動監(jiān)聽實現(xiàn)商城樓梯式導航效果
這篇文章主要介紹了jQuery滾動監(jiān)聽，實現(xiàn)商城樓梯式導航,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
jQuery幻燈片帶縮略圖輪播效果代碼分享
這篇文章主要介紹了jQuery實現(xiàn)幻燈片帶縮略圖輪播特效,圖片可以自行替換，推薦給大家，有需要的小伙伴可以參考下
2015-08-08