最新的网页需要为用户选择一些下拉列表框的负荷，原来是要装在服务器端应该使用。最后，由于业务逻辑的考虑，一些DropDownList的功能需要在客户端实现的。现在的下拉列表的功能是不是整个服务器端的更好。

具体方法：

将DropDownList控件在页面添加一项分析HTML代码生成的，所以当用js做的动态控制，它会很清楚。其测试代码如下所示。



一



看浏览器对HTML：以下是由DropDownList控件生成的HTML代码和普通的选择。

另外，还可以使用js动态填充、删除、选择和其他控件。



一



您可以删除1个，现在添加两个HTML按钮控件，用于添加选项，并删除所有选项：







添加和删除如下函数：




功能addoption（）{

无功ddlobj = document.getelementbyid（dropdownlist1 / /）；获取对象

如果（ddlobj。长度＞0）

（deloption）； / /删除所有，后加入

无功opttext =新的数组（创始人

无功optvalue =新的数组（0

无功ooption = null；

对于（var i = 0；i < opttext.length；i++）{

ooption =新的选项（opttext {我}，optvalue {我}）；

DdlObj.options.add（ooption）；

}

}

功能deloption（）{

无功ddlobj = document.getelementbyid（dropdownlist1 / /）；获取对象
对于（var i = ddlobj.length-1；我> = 0；我--）{
DdlObj.remove（我）； / /火狐浏览器不支持ddlcurselectkey.options.remove（），即两个支持
}
}


在浏览器中，您可以轻松地创建一个选择下拉选项，它比服务器更高效，因为这些是客户机生成的。

最后的代码。但在这个时候，如果你想使用dropdownlist1.selectedvalue让用户选择的选项，然后你将得到它

一个错误。这是因为DropDownList的js动态添加的，所以它的项目是不是ViewState，它并不是保持，

也就是说，我们不能在服务器端处理它。为了解决这个问题，您可以使用两种方式：1，隐藏控件

用户的选择；2、要求。形式。（参见MSDN品尝Ajax）

1，我们添加一个隐藏的控件到页面保存在下拉列表中选择更改的信息，让用户选择一种选择。

在感兴趣的信息之后，我们可以在服务器端获取信息并进行处理，从而合理地实现客户和服装之间的分工。

添加onChange事件DropDownList控件，此时它的HTML代码如下所示：






onchange事件如下所示，主要保存用户选择的价值：


功能resvitem（）{
无功objddl = document.getelementbyid（dropdownlist1 ）；
document.getelementbyid（hiddenfield1）。值= objddl。选项{ objddl SelectedIndex值。}；
}


之后，我们使用一个ASP按钮控件来测试结果：


protected void button1_click（object sender，EventArgs e）
{
响应。写（hiddenfield1。值）；
}


在这里，所有的工作都做完了，但是有一个问题，DropDownList的变化事件仅是拉低了用户。

该事件被触发。因此，当用户使用默认选项提交时，用户获得空值，

隐藏的初始化。对addoption事件添加一行代码如下：


功能addoption（）{

无功ddlobj = document.getelementbyid（dropdownlist1 / /）；获取对象

If (ddlObj.length>0)

（deloption）； / /删除所有，后加入

无功opttext =新的数组（创始人

无功optvalue =新的数组（0
无功ooption = null；

对于（var i = 0；i < opttext.length；i++）{

ooption =新的选项（opttext {我}，optvalue {我}）；

DdlObj.options.add（ooption）；

}
document.getelementbyid（hiddenfield1）。值= optvalue { 0 }；
}


但是，以上红色部分在TT浏览器中没有成功添加，其他浏览还没有尝试过，下面是另一种写作方式：


getdeptlist（）函数
{
无功ddlcitytype = document.getelementbyid（ddlcitytype ）；
无功ddlposition = document.getelementbyid（ddlposition ）；
var v = ddlcitytype。选项{ ddlcitytype SelectedIndex }；
/ /警报（v.value）；

无功deptlist = guest_userregister.getdeptlist（v.value）的价值；

无功deptlist =新的数组（）；
deptlist = deptlist.split（'；'）；
对于（var i = 0；i < deptlist.length；i++）
{
如果（deptlist {我}！
{
VaR部= deptlist {我}分裂（'，'）；
VaR选择= document.createelement（选项）；
opt.innerhtml =部{ 1 }；
opt.value =部{ 0 }；
ddlposition.insertbefore（OPT，ddlposition。第一个孩子）；
}
}
}
deloption（）函数
{
无功ddluserschool = document.getelementbyid（ddluserschool ）；
Num = ddluserschool.length VaR；
同时（号码> 0）
{
对于（var j = 0；j <数字；j + +）
{
ddluserschool.remove（J）；
}
Num = ddluserschool.length；
}

}
getschoollist（）函数
{
deloption（）；
无功ddlprovince = document.getelementbyid（ddlprovince ）；
无功ddluserschool = document.getelementbyid（ddluserschool ）；
var v = ddlprovince。选项{ ddlprovince SelectedIndex }；
无功deptlist = guest_userregister.getschoollist（v.value）的价值；
无功deptlist =新的数组（）；
deptlist = deptlist.split（'；'）；
对于（var i = 0；i < deptlist.length；i++）
{
如果（deptlist {我}！
{
VaR部= deptlist {我}分裂（'，'）；
VaR选择= document.createelement（选项）；
opt.innerhtml =部{ 1 }；
opt.value =部{ 0 }；
ddluserschool.insertbefore（OPT，ddluserschool。第一个孩子）；
}
}
}