级联绑定

利用Jquery和Ajax实现无刷新级联绑定，代码如下：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
 4     <title></title>
 5     <script type="text/javascript">
 6         $(function () {
 7 
 8             $.getJSON("Handler.ashx", { action: "GetXQ" }, function (result) {
 9                 $.each(result, function (i, item) {
10                     $("#xq").append("<option value='" + item["ID"] + "'>" + item["ZDB_NAME"] + "</option>"); //end
11                 }); //end
12             }); //end
13 
14             $("#xq").change(function () {
15                 $("#sq option[value!='0']").remove(); //end
16                 $.getJSON("Handler.ashx", { action: "GetSQ", xq: $("#xq").val() }, function (result) {
17                     $.each(result, function (i, item) {
18                         $("#sq").append("<option value='" + item["ID"] + "'>" + item["ZDB_NAME"] + "</option>"); //end
19                     }); //end
20                 }); //end
21             }); //end
22 
23             $("#sq").change(function () {
24                 $("#czf option[value!='0']").remove(); //end
25                 $.getJSON("Handler.ashx", { action: "GetCZF", xqid: $("#xq").val(), sqid: $("#sq").val() }, function (result) {
26                     $.each(result, function (i, item) {
27                         $("#czf").append("<option value='" + item["ID"] + "'>" + item["CZFMC"] + "</option>"); //end
28                     }); //end
29                 }); //end
30             }); //end
31 
32         })
33     </script>
34 </head>
35 <body>
36     <form id="form1" runat="server">
37     <div>
38         <select id="xq">
39             <option value="0">请选择...</option>
40         </select>
41         <select id="sq">
42             <option value="0">请选择...</option>
43         </select>
44         <select id="czf">
45             <option value="0">请选择...</option>
46         </select>
47     </div>
48     </form>
49 </body>
50 </html>

后来，遇到一个问题，要在后台用 this.xq.Value 获取下拉列表的Value值时，无论如何也获取不了。只有像下面这种固定的下拉列表才能获取到

 1 <select id="xq">
 2              <option value="0">请选择...</option>
 3              <option value="1">1111</option>
 4          <option value="2">2222</option>
 5         </select>
 6          <select id="sq">
 7              <option value="0">请选择...</option>
 8              <option value="1">11111</option>
 9              <option value="2">22222</option>
10             <option value="3">33333</option>
11         </select>
12          <select id="czf">
13           <option value="0">请选择...</option>
14           <option value="1">11111</option>
15              <option value="2">22222</option>
16              <option value="3">33333</option>
17          </select>

对于动态绑定的要么利用<input type="hidden"/>保存。或者给select加上name属性。然后利用 request.Form[""]
获取。

posted @ 2014-08-01 15:02  科技在线  阅读(116)  评论(0)    收藏  举报