最近多個(gè)頁(yè)面需要加載一些下拉列表框，供用戶選擇，原來(lái)都是在服務(wù)器端進(jìn)行加載應(yīng)運(yùn)用。最后由于業(yè)務(wù)邏輯方面的考慮，需要將DropDownList的部分功能放到客戶端實(shí)現(xiàn)?，F(xiàn)在下拉列表的功能使用起來(lái)感覺(jué)比全部放到服務(wù)器端性能好多了。

具體方法：

在頁(yè)面中放入一個(gè)DropDownList控件，并添加一項(xiàng)，用來(lái)分析其產(chǎn)生的HTML代碼，這樣在使用js進(jìn)行動(dòng)態(tài)控制時(shí)，將會(huì)非常清晰其測(cè)試代碼如下所示：

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
</asp:DropDownList>

在瀏覽器中查看，并對(duì)Html進(jìn)行分析：以下是DropDownList控件生成的HTML代碼。和普通的select沒(méi)

有區(qū)別。那么也就可以通過(guò)js來(lái)動(dòng)態(tài)填充、刪除、選擇等控制。

<select name="DropDownList1" id="DropDownList1">
<option value="1">1</option>
</select>

可以將<asp:ListItem>1</asp:ListItem>刪除，現(xiàn)在添加兩個(gè)HTML button控件，分別用來(lái)實(shí)現(xiàn)添加選項(xiàng)，和刪除所有選項(xiàng)。Button源碼如下：

<input id="Button1" type="button" value="添加Option" onclick="addOption()" />

<input id="Button2" type="button" value="全部刪除Option" onclick="delOption()" />

添加和刪除函數(shù)如下所示：

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//獲取對(duì)象

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");//獲取對(duì)象
for(var i=ddlObj.length-1;i>=0;i--){
ddlObj.remove(i);//firefox不支持ddlCurSelectKey.options.remove(),IE兩種均支持
}
}

在瀏覽器中查看，可以輕松地創(chuàng)建選擇下拉選項(xiàng)，由于這些是客戶端生成，因此其效率上要高于服務(wù)器

端工作的代碼。但是這個(gè)時(shí)候如果要使用DropDownList1.SelectedValue獲取用戶選擇的選項(xiàng)，那么你會(huì)得

到一個(gè)錯(cuò)誤。這是由于DropDownList是由JS動(dòng)態(tài)添加的，因此，它的項(xiàng)不屬于ViewState，并且不被維護(hù)，

也就是說(shuō)我們無(wú)法在服務(wù)器端對(duì)其進(jìn)行處理。為了解決這一問(wèn)題，可以使用兩種方式：1、Hidden控件保存

用戶選項(xiàng)方式；2、Request.Form方式。(參見(jiàn)msdn品味Ajax)

1、我們?cè)陧?yè)面中添加一個(gè)Hidden控件，用它來(lái)保存DropDownList選項(xiàng)變化的信息，這樣在用戶選擇感

興趣的信息之后，我們就可以在服務(wù)器端獲取信息，并進(jìn)行處理，合理地實(shí)現(xiàn)客、服之間的分工。

對(duì)DropDownList控件添加一個(gè)onchange事件，此時(shí)它的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;
}

在此之后，我們使用一個(gè)asp:button控件來(lái)測(cè)驗(yàn)結(jié)果：

protected void Button1_Click(object sender, EventArgs e)
{
Response.Write(HiddenField1.Value);
}

到此，已經(jīng)完成了所有的工作，但是還有一個(gè)問(wèn)題，DropDownList的change事件只有在用戶改變下拉選

項(xiàng)時(shí)才會(huì)觸發(fā)。因此，用戶使用默認(rèn)選項(xiàng)進(jìn)行提交時(shí)，則獲取空值。因此我們可以在填充option時(shí)，即對(duì)

hidden初始化。對(duì)addOption事件添加一行代碼如下：

function addOption(){

var ddlObj = document.getElementById("DropDownList1");//獲取對(duì)象

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];
}

不過(guò)以上紅色部分在TT瀏覽器下ADD不成功，其他瀏覽還沒(méi)試過(guò)，以下是另一個(gè)種寫法：

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);
}
}
}

您可能感興趣的文章: