Javascript操作DropDownList控件总结

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

代码

< asp:DropDownList ID  =   " ddlCities "  runat  =   " server " >
         < asp:ListItem Value  =   " 0 " > 长沙 </ asp:ListItem >
         < asp:ListItem Value  =   " 1 " > 北京 </ asp:ListItem >
         < asp:ListItem Value  =   " 2 " > 天津 </ asp:ListItem >
         < asp:ListItem Value  =   " 3 " > 漠河 </ asp:ListItem >
</ asp:DropDownList >
        
< select id  =   " ddlNames "  runat  = " server " >
         < option value  =   " 0 " > James </ option >
         < option value  =   " 1 " > Green </ option >
         < option value  =   " 2 " > Lily </ option >
         < option value  =   " 3 " > Lucy </ option >
</ select >  

　　在浏览器中查看该页面，并点击查看源文件，不难看出，asp.net页面被渲染成了如下格式：

代码

< select name = " ddlCities "  id = " ddlCitys " >
     < option value = " 0 " > 长沙 </ option >
     < option value = " 1 " > 北京 </ option >
     < option value = " 2 " > 天津 </ option >
     < option value = " 3 " > 漠河 </ option >
</ select >
        
< select name = " ddlNames "  id = " ddlNames " >
     < option value = " 0 " > James </ option >
     < option value = " 1 " > Green </ option >
     < option value = " 2 " > Lily </ option >
     < option value = " 3 " > Lucy </ option >
</ select >  

 

　　好了，接下来介绍一下要用javascript操纵DropDownList控件，首先得了解select(或者DropDownList)的两个最基本的属性，一个是value属性，一个是text属性，还有一个selectedIndex属性，用来标识当前选中的项（数字），具体可参见上面的示例代码。

　　下面正式言归正传，主要介绍如下几点：

（1） 清空DropDownList控件中的值，其中ddlCities为要清空的DropDownList的ID。

　　

document.getElementById( ' ddlCities ' ).options.length  =   0 ;

 

 (2) 判断DropDownList中是否有value为'objItemValue'的ListItem。

 

代码

function  isListItemExistByValue(objDdl, objItemValue)
{
     var  isExist  =   false ;
     for ( var  i  in  objDdl.options)
　　 {
　　　　 if (i.value  ==  objItemValue)
　　　　{
　　　　　　isExist  =   true ;
　　　　　　 break ;
　　　　}
　　}
　　 return  isExist;
}

 

  

---

(3) 判断DropDownList中是否有text为'objItemText'的ListItem。（采用了另一种for循环）

---

 

代码

function  isListItemExistByText(objDdl, objItemText)
{
     var  isExist  =   false ;
     for  ( var  i  =   0 ; i  <  objDdl.options.length; i ++ ) {
         if  (objDdl.options[i].text  ==  objItemText) {
            isExist  =   true ;
             break ;
        }
    }
　　 return  isExist;
}

 

 

---

(4) 向objDdl添加一个item，其中value为paramValue，text为paramText

---

 代码

---

(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选项中value = "paramValue"的text为"paramText"
function  changeItemText(objDdl , paramValue , paramText)
{
     if  (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);
    }
}

 

 (9) 设置objDdl中text为"paramText"的第一个Item为选中

---

代码

// 设置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;
}

 

---