下午分享《MVC編輯狀態兩個DropDownList聯動》http://www.cnblogs.com/insus/p/3426563.html 不久,馬上有網友問及三級聯動的例子。Insus.NET回復他,會做二級聯動,三級應該不難。原理與方法是一樣的。
寫此篇的目的,還是處理jQuery怎樣獲取動態產生后的html的標簽或是元素。
還是先回過頭去看篇頭指定的鏈接的文章。一開始時,Insus.NET使用了jQuery的ajax產生了一數據行,並append至
<tbody id="tbody1"></tbody>
但是,在后續的jQuery是很難找到append的html的標簽或元素。為了能找到兩個select下拉列表,Insus.NET當時只能把相關的代碼都寫在
function OutputData(tbody, item) {}
這個自定義函數內。
這一直不是Insus.NET想要的。不太喜歡把什么代碼均寫在一個函數內,這樣日后的維護帶來相當大的困惑。當時完成它時,只求功能的實現。現在,Insus.NET決定再重構這部分。盡量把它能抽取的或是拆分的,都抽取和拆分成更細小,單獨的函數。
第一個可以抽取的是聯動有事件:
把它拿掉,並移出這個自定義函數外:
那change函數需要改為#93行的語法,另外事件中需要獲取兩個select的下拉列表,也需要分別改為#96和#98行,一個獲取控件之后,還要獲取其值,另一個僅是獲取控件。
第二個可移動的地方,是那個更新的數據的部分代碼:
可以寫在一個單獨立的
$(document).ready(function () {}
代碼有變動的地方,可參考下圖高亮部分:
經這樣重構之后,能脫離這個函數的代碼,均移至
function OutputData(tbody, item) {}