自己编写的基于jQuery的级联 下拉列表

最近想要使用级联下拉列表,一直也没有找到好的,就自己动手写了一个基于jquery 框架的 插件,嘿嘿。蛮好用的,
以前在网上看到过一个,但是实用性不是很强,所以自己动手写了一个,但是内个数据,还是用以前内位大哥的,呵呵。
喜欢的朋友可以试试,

下面是一些使用代码:

1 这里是调用的javascript代码:
2  <script language="javascript" type="text/javascript">
3 $(document).ready(function (){
4 $().related({
5 S1:"s1",
6 S2:"s2",
7 S3:"s3"
8 });
9 $().related({
10 S1:"s_3_1",
11 S2:"s_3_2",
12 S3:"s_3_3",
13 isText:false
14 });
15 $().related({
16 S1:"select_1",
17 S2:"select_2",
18 S3:"select_3",
19 S1Text:"请选择省",
20 S2Text:"请选择市",
21 S3Text:"请选择辖区"
22 });
23 $().related({
24 S1:"s_1_1",
25 S2:"s_1_2",
26 isText:false
27 });
28 $().related({
29 S1:"s_2_1",
30 S2:"s_2_2",
31 isText:true
32 });
33 $("#btn_click").click(function(){
34 var val1,val2,val3;
35 val1=$("#s1").val();
36 val2=$("#s2").val();
37 val3=$("#s3").val();
38 alert("这里是取到的值\n列表1:"+val1+"\n列表2:"+val2+"\n列表3:"+val3);
39 });
40
41 });
42 script>
43 下面是页面代码:
44 <body>
45
46 <select id="s1" name="s1" >
47 select>
48 <select id="s2" name="s2">
49 select>
50 <select id="s3" name="s3"><br />
51 select>
52 <input type="button" value="测试是否取到值" id="btn_click" />
53 <hr />
54 <select id="s_3_1">select>
55 <select id="s_3_2">select>
56 <select id="s_3_3">select>
57
58 <hr />
59 <select id="select_1">select>
60 <select id="select_2">select>
61 <select id="select_3">select>
62 <hr />
63 <select id="s_1_1">select>
64 <select id="s_1_2">select>
65 <hr />
66 <select id="s_2_1">select>
67 <select id="s_2_2">select>
68
69 body>
70 html>
 

下面是页面

大家可以帮助测试一下,具体也没有详细测试,如果发现有什么不合理或出现了什么bug 可以直接加我qq指教,:397254274

由于不知道如何插入附件,我就将文件上传到csdn了,如果想要下载请点击下面的链接把:

下载地址:http://download.csdn.net/source/2917449

第一个版本中有bug,在ie8上会出现数据没有办法显示,下面是修正版,已经解决了上面的问题,如果有兴趣可以两个都下载下来参考一下

下面是修正版:http://download.csdn.net/source/2925437

posted @ 2010-12-17 15:22  听风.  阅读(9393)  评论(3编辑  收藏  举报