【工作筆記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開發用例。