大家都知道,.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: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 >
< 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;
}
{
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;
}
{
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 ;
}
{
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);
}
}
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)
}
}
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;
}
function getSelectedValue(objDdl) {
return objDdl.value;
}
(11) 得到当前的选中项的text
//
得到当前的选中项的值text
function getSelectedText(objDdl) {
return objDdl.options[objDdl.selectedIndex].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;
}
function setSelectedItemByValue(objDdl, paramValue) {
objDdl.value = paramValue;
}
(13) 得到当前选中项的Index
//
得到当前选中项的Index
function getCurrSelectedIndex(objDdl) {
return objDdl.selectedIndex;
}
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;
}