最新消息:

第24款插件:jquery.chained.js多级联动插件

联动插件 杨红伟 4695浏览 0评论

描述:Chained 是一个简单易用的轻量级 jQuery 多级联动插件,使用它可快速创建多级联动的下拉列表。它通过在 Select 中设置 class 样式名来关联上级列表,下拉列表数据来源多样性,可以从本地 js 加载,或者使用 AJAX 从服务器端异步获取 JSON 数据。更重要的是它完美支持多种浏览器,没有兼容性问题。

兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:暂无
JS下载: http://www.ijquery.cn/js/jquery.chained.js
预览: http://www.ijquery.cn/demo/chained
打包下载: http://www.ijquery.cn/demo/chained/chained.zip
参数说明:
图片展示:

11

JS引用代码:

[js]

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery.chained.js"></script>
<script type="text/javascript">
$(function () {
$("#series").chained("#mark");  //注:#series是二级的id,#mark是一级的id
});
</script>

[/js]

HTML代码:
说明:只要二级的option设置的class的属性是一级的value的值就可以了!
如一级<select id=”series“><option value=”bmw”>BMW</option></selected>,
二级<option value=”series-1″ class=”bmw”>

[html]

<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">1 series</option>
<option value="series-3">3 series</option>
<option value="series-5">5 series</option>
<option value="series-6">6 series</option>
<option value="series-7">7 series</option>

<option value="a1">A1</option>
<option value="a3">A3</option>
<option value="s3">S3</option>
<option value="a4">A4</option>
<option value="s4">S4</option>
<option value="a5">A5</option>
<option value="s5">S5</option>
<option value="a6">A6</option>
<option value="s6">S6</option>
<option value="rs6">RS6</option>
<option value="a8">A8</option>
</select>
</form>

[/html]

CSS代码:

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址