這個案例對經常寫前端程序的人來講應該比較簡單,不過像我這種習慣於后台開發,對前端不熟悉的人來說,還是有參考意義的。
在asp.net里面,經常需要響應下拉列表DropDownList的SelectedIndexChanged事件。這個在后台來做,比較簡單,只需要設置控件的AutoPostBack 屬性為true,然后編寫相應的后台事件處理代碼即可。
但是,這樣的實現方式有時候不太合適。因為,每當修改下拉列表的選項都會觸發服務器的響應操作。這個在某些情況下是必要的,但在某些情況下卻顯得多余。比如:用戶只是希望修改選項然后再界面上看到不同的顯示,這樣的情況仍然采用服務器的事件處理程序來處理就顯得有些浪費資源。所以,我們可以考慮采用HTML控件再加上runat=“server”屬性,保證服務器能讀取該控件的值還可以用js讀取控件的值。不說了,看案例吧。
下面的案例希望在修改下拉列表的值時把當前選擇的項目的值顯示在頁面上。
1 <html> 2 <head> 3 <title>test</title> 4 <script type="text/javascript"> 5 function changeTitle() { 6 document.getElementById("divTitle").innerHTML = document.getElementById("cars").value; 7 } 8 </script> 9 </head> 10 <body> 11 12 <form> 13 <div id="divTitle" style="border:solid 1px red; width:200px;height:50px;"></div> 14 <select id="cars" name="cars" onchange="changeTitle();"> 15 <option value="Volvo">Volvo</option> 16 <option value="saab">Saab</option> 17 <option value="fiat" selected="selected">Fiat</option> 18 <option value="audi">Audi</option> 19 </select> 20 </form> 21 22 </body> 23 </html>