先將本文主要介紹通過Javascript和CSS如何實(shí)現(xiàn)一個可編輯的下拉菜單自定義控件。。

近來開發(fā)一個管理系統(tǒng)，為了提高用戶體驗(yàn)和友好的UI界面，開發(fā)了一些自定義控件，本文主要介紹用TextBox模擬可編輯的下拉菜單。此控件具有現(xiàn)實(shí)參數(shù)名稱取值的時(shí)候可以直接取到參數(shù)對應(yīng)的編碼，如：男——001，女——002；頁面顯示“男”或“女”，取值時(shí)可以取到“男”和“女”對應(yīng)的編碼001和002；大家看到這里可能會有個疑問為什么不直接用DropDownList呢，或者用CheckBoxList和RadioButtonList呢？同樣可以解決所提出的問題！那么編輯功能呢？或許你可能還會想到用一個文本框覆蓋DropDownList，這次問題貌似就全部搞定了！呵呵。。那我再提出一個問題，要是參數(shù)列表中有成千上萬的參數(shù)呢，用以上的解決方案的話，運(yùn)行起來的效果大家可向而知，效果是多么的糟糕，！還有人認(rèn)為那就用文本框覆蓋DropDownList在結(jié)合Ajax不就把全部問題都解決嘛，但是個人（可能是個人能力有限）認(rèn)為用文本框覆蓋DropDownList不太好布局?。?！最后，決定用 JavaScript、Ajax和CSS來模擬一個可編輯下來菜單，為了方便項(xiàng)目組使用和管理，最后集成了一個自定義控件。。

看到這里是不是大家很想知道本控件是怎么實(shí)現(xiàn)的和它的強(qiáng)大之處，那么先將控件運(yùn)行效果與大家分享一下：

圖一  初始化

圖二  輸入?yún)?shù)編碼

圖三  完成

圖四 錯誤校驗(yàn)功能

控件的實(shí)現(xiàn)思路

1.              此控件包括兩個文本框和一個小圖片，一個文本框用來顯示參數(shù)名稱和輸入值，另一個文本框隱藏，用來保存參數(shù)對應(yīng)的編碼；用CSS將小圖片結(jié)合到一起，使其外表像一個下拉菜單（運(yùn)行效果如圖一）。

2.              用根據(jù)輸入值用Ajax與服務(wù)器進(jìn)行異步交互，獲取數(shù)據(jù)；Server用戶可以根據(jù)輸入值進(jìn)行篩選數(shù)據(jù)，在這個過程中解決了參數(shù)過多的問題；Client獲得到得數(shù)據(jù)用Javascript進(jìn)行數(shù)據(jù)解析再由CSS進(jìn)行布局的控制（運(yùn)行效果如圖二）。

3.              選擇參數(shù)過程中，通過Javascript可以將參數(shù)名稱和對應(yīng)的編碼進(jìn)行對文本框進(jìn)行賦值（運(yùn)行效果如圖三）。

4.              此控件可以進(jìn)行參數(shù)正確性的驗(yàn)證（運(yùn)行效果如圖四）。

這樣一來，很容易就可以再服務(wù)器端獲取參數(shù)名稱和對應(yīng)的參數(shù)編碼。

提示：此控件有個小地方想進(jìn)行改進(jìn)，就是不想要那個隱藏文本框來保存參數(shù)編碼；剛開始對此控件擴(kuò)展了一個屬性，用來保存編碼，可是在第三個步驟用JavaScript進(jìn)行賦值和修改擴(kuò)展屬性時(shí)，獲取不到對屬性修改的值和賦的值。還希望大家能幫忙思考一下。。

今天，先寫到這里我會逐漸的將具體實(shí)現(xiàn)代碼貼出來，與大家分享。。