最近多個頁面需要載入一些下拉列錶框，供使用者選擇，原來都是在伺服器端進行載入應運用。最後由於業務邏輯方面的考慮，需要將DropDownList的部分功能放到客戶端實作。現在下拉清單的功能使用起來感覺比全部放到伺服器端效能好多了。
具體方法：
在頁面中放入一個DropDownList控件，並添加一項，用來分析其產生的HTML程式碼，這樣在使用js進行動態控制時，將會非常清晰其測試程式碼如下所示：
<asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem>1</asp:ListItem> </asp:DropDownList>
在瀏覽器中查看，並對Html進行分析：以下是DropDownList控制項產生的HTML程式碼。和普通的select沒
有差別。那麼也就可以透過js來動態填滿、刪除、選擇等控制。
<select name="DropDownList1" id="DropDownList1"> <option value="1">1</option> </select>
可以將
<input id="Button1" type="button" value="添加Option" onclick="addOption()" /> <input id="Button2" type="button" value="全部删除Option" onclick="delOption()" />
新增和刪除函數如下所示：
function addOption(){
var ddlObj = document.getElementById("DropDownList1");//获取对象
if(ddlObj.length>0)
delOption();//先删除所有的，之后在添加
var optText = new Array("founder","china","beijing");
var optValue = new Array("0","1","2");
var oOption = null;
for(var i=0;i<optText.length;i++){
oOption = new Option(optText[i],optValue[i]);
ddlObj.options.add(oOption);
}
}
function delOption(){
var ddlObj = document.getElementById("DropDownList1");//获取对象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE两种均支持
}
}在瀏覽器中查看，可以輕鬆地建立選擇下拉選項，由於這些是客戶端生成，因此其效率上要高於伺服器
端工作的程式碼。但是這個時候如果要使用DropDownList1.SelectedValue來取得使用者選擇的選項，那麼你會得到
到一個錯誤。這是由於DropDownList是由JS動態添加的，因此，它的項目不屬於ViewState，並且不被維護，
也就是說我們無法在伺服器端對其進行處理。為了解決這個問題，可以使用兩種方式：1、Hidden控制保存
使用者選項方式；2、Request.Form方式。 (參見msdn品味Ajax)
1、我們在頁面中添加一個Hidden控件，用它來保存DropDownList選項變化的信息，這樣在用戶選擇感
興趣的資訊之後，我們就可以在伺服器端取得訊息，並進行處理，合理地實現客、服之間的分工。
對DropDownList控制項新增onchange事件，此時它的html程式碼如下：
<asp:DropDownList ID="DropDownList1" runat="server" onchange="ResvItem()"> </asp:DropDownList>
Onchange事件如下所示，此事件主要保存使用者選定的value：
function ResvItem(){
var objDdl = document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value = objDdl.options[objDdl.selectedIndex].value;
}在此之後，我們使用一個asp:button控制項來測驗結果：
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}到此，已經完成了所有的工作，但是還有一個問題，DropDownList的change事件只有在使用者改變下拉選
項時才會觸發。因此，使用者使用預設選項進行提交時，則會取得空值。因此我們可以在填充option時，即對
hidden初始化。為addOption事件新增一行程式碼如下：
function addOption(){
var ddlObj = document.getElementById("DropDownList1");//获取对象
if(ddlObj.length>0)
delOption();//先删除所有的，之后在添加
var optText = new Array("founder","china","beijing");
var optValue = new Array("0","1","2");
var oOption = null;
for(var i=0;i<optText.length;i++){
oOption = new Option(optText[i],optValue[i]);
ddlObj.options.add(oOption);
}
document.getElementById("HiddenField1").value = optValue[0];
}不過以上紅色部分在TT瀏覽器下ADD不成功，其他瀏覽還沒試過，以下是另一個種寫法：
function GetDeptList()
{
var ddlCityType = document.getElementById("ddlCityType");
var ddlPosition = document.getElementById("ddlPosition");
var v = ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);
var DeptList=Guest_UserRegister.GetDeptList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option");
opt.innerHTML = dept[1];
opt.value = dept[0];
ddlPosition.insertBefore(opt, ddlPosition.firstChild);
}
}
}
function DelOption()
{
var ddluserSchool = document.getElementById("ddluserSchool");
var num=ddluserSchool.length;
while(num>0)
{
for(var j=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}
}
function GetSchoolList()
{
DelOption();
var ddlProvince = document.getElementById("ddlProvince");
var ddluserSchool = document.getElementById("ddluserSchool");
var v = ddlProvince.options[ddlProvince.selectedIndex];
var DeptList=Guest_UserRegister.GetSchoolList(v.value).value;
var deptList=new Array();
deptList=DeptList.split(';');
for(var i=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
var dept=deptList[i].split(',');
var opt = document.createElement("option");
opt.innerHTML = dept[1];
opt.value = dept[0];
ddluserSchool.insertBefore(opt, ddluserSchool.firstChild);
}
}
}
