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

最新推荐文章于 2020-02-29 19:19:00 发布

a617508321

最新推荐文章于 2020-02-29 19:19:00 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bq-blog/archive/2010/12/17/1909323.html

版权

最近想要使用级联下拉列表，一直也没有找到好的，就自己动手写了一个基于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>

下面是页面