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;
}

 

---