【工作笔记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开发用例。