Javascript操作DropDownList控件总结

　　大家都知道，.NET中一些Web服务器控件解析并编译，最终被渲染的时候，其实是转化成了普通的html控件，比如<asp:LinkButton>控件就被渲染成了<a>锚点控件，这里要讲的DropDownList控件也一样，被渲染成了普通的select控件，在如下的asp.net页面中定义了一个web服务器控件DropDownList和一个普通的select控件（主要为了对比）。
代码

(5) objDdl删除一个item，其中参数为value的值为paramValue

代码

(6) objDdl删除多个item，其中参数为text的值为paramText

代码

(7) objDdl删除当前选中项function removeSelectedListItem(objDdl)
{
objDdl.options[objDdl.selectedIndex] = null;
}

(8) 修改objDdl选项中value = "paramValue"的text为"paramText"

代码//设置objDdl中text为"paramText"的第一个Item为选中
function setSelectedItemByText(objDdl , paramText)
{
//判断是否存在
var isExist = false;
for (var i = 0; i < objDdl.options.length; i++) {
if (objDdl.options[i].text == paramText) {
objDdl.options[i].selected = true;
isExist = true;
break;
}
}

//显示出来结果
if(!isExist)
{
alert('选择失败，不存在该项：' + paramText)
}
}

(10) 得到当前的选中项的value

//得到当前的选中项的值value
function getSelectedValue(objDdl) {
return objDdl.value;
}

(11) 得到当前的选中项的text

//得到当前的选中项的值text
function getSelectedText(objDdl) {
return objDdl.options[objDdl.selectedIndex].text;
}

(12) 设置objDdl中value = "paramValue"的item为选中

//设置objDdl中value = "paramValue"的item为选中
function setSelectedItemByValue(objDdl, paramValue) {
objDdl.value = paramValue;
}

(13) 得到当前选中项的Index

//得到当前选中项的Index
function getCurrSelectedIndex(objDdl) {
return objDdl.selectedIndex;
}

看这里，上面的代码写的比较凌乱，这里我把这些方法封装成一个对象，以后直接调用就可以了。

var ddlHandler = {};

//清空objDdl中的所有项
ddlHandler.truncate = function(objDdl) {
objDdl.options.length = 0;
}

//判断objDdl中是否存在value为paramValue的项(ListItem)
ddlHandler.isExistItemByValue = function(objDdl, paramValue)
{
var isExist = false;

for (var i = 0; i < objDdl.options.length; i++) {
if (objDdl.options[i].value == paramValue) {
isExist = true;
break;
}
}

return isExist;
}

//判断objDdl中是否存在text为paramValue的项(ListItem)
ddlHandler.isExistItemByText = function(objDdl, paramText) {
var isExist = false;

for (var i = 0; i < objDdl.options.length; i++) {
if (objDdl.options[i].text == paramText) {
isExist = true;
break;
}
}

return isExist;
}

//向objDdl添加一个item，其中value为paramValue，text为paramText
ddlHandler.addListItem = function(objDdl , paramValue , paramText)
{
//首先判断是否已存在paramValue的项
if(this.isExistItemByValue(objDdl,paramValue))
{
alert('添加失败，不能添加重复项：' + paramValue);
}
else
{
var varItem = new Option(paramText,paramValue);
objDdl.options.add(varItem);
}
}

//向objDdl删除一个item，其中参数为value的值为paramValue
ddlHandler.removeListItemByValue = function(objDdl , paramValue)
{
//首先判断是否存在该项，存在才删除
if (!this.isExistItemByValue(objDdl, paramValue))
{
alert('删除失败，因为不存在该项：' + paramValue);
}
else
{
for(var i = 0 ; i< objDdl.options.length ; i++)
{
if(objDdl.options[i].value == paramValue)
{
objDdl.options.remove(i);
break;
}
}
}
}

//向objDdl删除找到的item，其中参数为text的值为paramText
ddlHandler.removeListItemByText = function(objDdl, paramText) {
//首先判断是否存在该项，存在才删除
if (!this.isExistItemByText(objDdl, paramText)) {
alert('删除失败，因为不存在该项：' + paramText);
}
else {
for (var i = 0; i < objDdl.options.length; i++) {
if (objDdl.options[i].text == paramText) {
objDdl.options.remove(i);
}
}
}
}

//删除objDdl当前选中的项
ddlHandler.removeSelectedListItem = function(objDdl)
{
objDdl.options[objDdl.selectedIndex] = null;
}

//修改objDdl选项中value = "paramValue"的text为"paramText"
ddlHandler.changeItemText = function(objDdl , paramValue , paramText)
{
if (this.isExistItemByValue(objDdl, paramValue))
{
for(var i= 0 ; i< objDdl.options.length ; i++)
{
if(objDdl.options[i].value == paramValue)
{
objDdl.options[i].text = paramText;
break;
}
}
}
else
{
alert('更新失败，不存在该项：' + paramValue);
}
}

//设置objDdl中text为"paramText"的第一个Item为选中
ddlHandler.setSelectedItemByText = function(objDdl , paramText)
{
//判断是否存在
var isExist = false;
for (var i = 0; i < objDdl.options.length; i++) {
if (objDdl.options[i].text == paramText) {
objDdl.options[i].selected = true;
isExist = true;
break;
}
}

//显示出来结果
if(!isExist)
{
alert('选择失败，不存在该项：' + paramText)
}
}

//得到当前的选中项的值value
ddlHandler.getSelectedValue = function(objDdl) {
return objDdl.value;
}

//得到当前的选中项的值text
ddlHandler.getSelectedText = function(objDdl) {
return objDdl.options[objDdl.selectedIndex].text;
}

//设置objDdl中value = "paramValue"的item为选中
ddlHandler.setSelectedItemByValue = function(objDdl, paramValue) {
objDdl.value = paramValue;
}

//得到当前选中项的Index
ddlHandler.getCurrSelectedIndex = function(objDdl) {
return objDdl.selectedIndex;
}