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