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

前端技术 2023/09/05 JavaScript

本文实例讲述了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.phpstudy.net/jiaoben/41472.html

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

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

本文地址：https://www.stayed.cn/item/12069

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案