javascript动态控制服务器控件实例
最近多个页面需要加载一些下拉列表框，供用户选择，原来都是在服务器端进行加载应运用。最后由于业务逻辑方面的考虑，需要将DropDownList的部分功能放到客户端实现。现在下拉列表的功能使用起来感觉比全部放到服务器端性能好多了。
具体方法：
在页面中放入一个DropDownList控件，并添加一项，用来分析其产生的HTML代码，这样在使用js进行动态控制时，将会非常清晰其测试代码如下所示：
<asp:DropDownListID="DropDownList1"runat="server"> <asp:ListItem>1</asp:ListItem> </asp:DropDownList>
在浏览器中查看，并对Html进行分析：以下是DropDownList控件生成的HTML代码。和普通的select没
有区别。那么也就可以通过js来动态填充、删除、选择等控制。
<selectname="DropDownList1"id="DropDownList1"> <optionvalue="1">1</option> </select>
可以将<asp:ListItem>1</asp:ListItem>删除，现在添加两个HTMLbutton控件，分别用来实现添加选项，和删除所有选项。Button源码如下：
<inputid="Button1"type="button"value="添加Option"onclick="addOption()"/> <inputid="Button2"type="button"value="全部删除Option"onclick="delOption()"/>
添加和删除函数如下所示：
functionaddOption(){
varddlObj=document.getElementById("DropDownList1");//获取对象
if(ddlObj.length>0)
delOption();//先删除所有的，之后在添加
varoptText=newArray("founder","china","beijing");
varoptValue=newArray("0","1","2");
varoOption=null;
for(vari=0;i<optText.length;i++){
oOption=newOption(optText[i],optValue[i]);
ddlObj.options.add(oOption);
}
}
functiondelOption(){
varddlObj=document.getElementById("DropDownList1");//获取对象
for(vari=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:DropDownListID="DropDownList1"runat="server"onchange="ResvItem()"> </asp:DropDownList>
Onchange事件如下所示，该事件主要保存用户选定的value：
functionResvItem(){
varobjDdl=document.getElementById("DropDownList1");
document.getElementById("HiddenField1").value=objDdl.options[objDdl.selectedIndex].value;
}
在此之后，我们使用一个asp:button控件来测验结果：
protectedvoidButton1_Click(objectsender,EventArgse)
{
Response.Write(HiddenField1.Value);
}
到此，已经完成了所有的工作，但是还有一个问题，DropDownList的change事件只有在用户改变下拉选
项时才会触发。因此，用户使用默认选项进行提交时，则获取空值。因此我们可以在填充option时，即对
hidden初始化。对addOption事件添加一行代码如下：
functionaddOption(){
varddlObj=document.getElementById("DropDownList1");//获取对象
if(ddlObj.length>0)
delOption();//先删除所有的，之后在添加
varoptText=newArray("founder","china","beijing");
varoptValue=newArray("0","1","2");
varoOption=null;
for(vari=0;i<optText.length;i++){
oOption=newOption(optText[i],optValue[i]);
ddlObj.options.add(oOption);
}
document.getElementById("HiddenField1").value=optValue[0];
}
不过以上红色部分在TT浏览器下ADD不成功，其他浏览还没试过，以下是另一个种写法：
functionGetDeptList()
{
varddlCityType=document.getElementById("ddlCityType");
varddlPosition=document.getElementById("ddlPosition");
varv=ddlCityType.options[ddlCityType.selectedIndex];
//alert(v.value);
varDeptList=Guest_UserRegister.GetDeptList(v.value).value;
vardeptList=newArray();
deptList=DeptList.split(';');
for(vari=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
vardept=deptList[i].split(',');
varopt=document.createElement("option");
opt.innerHTML=dept[1];
opt.value=dept[0];
ddlPosition.insertBefore(opt,ddlPosition.firstChild);
}
}
}
functionDelOption()
{
varddluserSchool=document.getElementById("ddluserSchool");
varnum=ddluserSchool.length;
while(num>0)
{
for(varj=0;j<num;j++)
{
ddluserSchool.remove(j);
}
num=ddluserSchool.length;
}
}
functionGetSchoolList()
{
DelOption();
varddlProvince=document.getElementById("ddlProvince");
varddluserSchool=document.getElementById("ddluserSchool");
varv=ddlProvince.options[ddlProvince.selectedIndex];
varDeptList=Guest_UserRegister.GetSchoolList(v.value).value;
vardeptList=newArray();
deptList=DeptList.split(';');
for(vari=0;i<deptList.length;i++)
{
if(deptList[i]!="")
{
vardept=deptList[i].split(',');
varopt=document.createElement("option");
opt.innerHTML=dept[1];
opt.value=dept[0];
ddluserSchool.insertBefore(opt,ddluserSchool.firstChild);
}
}
}