javascript动态控制服务器控件实例

最近多个页面需要加载一些下拉列表框，供用户选择，原来都是在服务器端进行加载应运用。最后由于业务逻辑方面的考虑，需要将DropDownList的部分功能放到客户端实现。现在下拉列表的功能使用起来感觉比全部放到服务器端性能好多了。

具体方法：

在页面中放入一个DropDownList控件，并添加一项，用来分析其产生的HTML代码，这样在使用js进行动态控制时，将会非常清晰其测试代码如下所示：

rush:xhtml;"> 1

在浏览器中查看，并对Html进行分析：以下是DropDownList控件生成的HTML代码。和普通的select没

有区别。那么也就可以通过js来动态填充、删除、选择等控制。

rush:js;">

可以将1删除，现在添加两个HTML button控件，分别用来实现添加选项，和删除所有选项。Button源码如下：

rush:js;">

添加和删除函数如下所示：

<div class="jb51code">
<pre class="brush:js;">
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两种均支持
}
}