【工作笔记0002】(ajax)多个select标签异步取值刷新

需求：点击其中一个select的option，另一个select中呈现被查询出的数据结果。例如：



实现：运用JavaScript + ajax + json遍历实现异步刷新。

步骤：

1.绑定js函数到select的onclick属性中。例如：

<select name="parent1" id="parent1" size="7" style="height:200px;width:20%" onclick="parent1_SelectedIndexChanged();">

<option value="9">设备回收</option>

<option value="10">设备出售</option>

</select>

2.编写js函数。例如：

function parent1_SelectedIndexChanged() {

         $('#parent3').empty();

         var obj = document.getElementById("parent1");

         var index = obj.selectedIndex;

         var val = obj.options[index].value;

         $.ajax({

             type: "GET",

             url: "/siteadmin/productsys/add.aspx?act=search&id=" + val,

             dataType: "json",

             success: function(data) {

                $('#parent2').empty();  //清空第二个select标签的option选项

                var html = '';

                 for (var i = 0; i < data.length; i++) {

                     html += '<option value="' + data[i].ID + '">' + data[i].ClassName + '</option>';//遍历后台返回的序列化后的json数据集合

                 }

                 $('#parent2').html(html);

             },                      

             error: function(msg) {

                 alert("查询失败！");

             }

            });

     }

3.编写后台查询函数。注意在得到查询结果集合（一般为model或者datatable对象）后，需要调用相关的序列化函数（不同编程语言调用方法略微不同，但函数名称基本都为Serialize）将其序列化，最后调用Response.Write(str);Response.End();方法将字符串写入http输出流并发送到客户端浏览器。

这里注意不同的MVC框架对序列化的处理不同，此处列出的是.net3.5类库下asp.net开发用例。