javascript对下拉列表框(select)的操作

这篇文章，主要是关于javascript和select相关的最基本方法

下面是我们例子的基础；这不是一个标准的表单。

< form  id ="f" >  
< select  size ="1"  name ="s" >  
< option  value ="lizi.name" > 梨子面馆 </ option >  
< option  value ="baidu.com" > 百度 </ option >  
</ select >  
</ form >  

 

---------------------------------------------------------------------------

< script type = " text/javascript " >  
<!--  
var  f  =  document.getElementById( " f " ); 

// 获得select列表项数目 
document.write(f.s.options.length); 
document.write(f.s.length); 

// 当前选中项的下标(从0 开始)（有两种方法） 
// 如果选择了多项，则返回第一个选中项的下标 
document.write(f.s.options.selectedIndex); 
document.write(f.s.selectedIndex); 

// 检测某一项是否被选中 
document.write(f.s.options[ 0 ].selected); 

// 获得某一项的值和文字 
document.write(f.s.options[ 0 ].value); 
document.write(f.s.options[ 1 ].text); 

// 删除某一项 
f.s.options[ 1 ]  =   null ; 

// 追加一项 
f.s.options[f.s.options.length]  =   new  Option( " 追加的text " ,  " 追加的value " ); 

// 更改一项 
f.s.options[ 1 ]  =   new  Option( " 更改的text " ,  " 更改的value " ); 
// 也可以直接设置该项的 text 和 value 
// --> 
</ script >  


// 全选列表中的项 
function  SelectAllOption(list) 
... { 
for (var i=0; i<list.options.length; i++) 
...{ 
list.options[i].selected = true; 
} 
}  


// 反选列表中的项 
function  DeSelectOptions(list) 
... { 
for (var i=0; i<list.options.length; i++) 
...{ 
list.options[i].selected = !list.options[i].selected; 
} 
}  


// 返回列表中选择项数目 
function  GetSelectedOptionsCnt(list) 
... { 
var cnt = 0; 
var i = 0; 
for (i=0; i<list.options.length; i++) 
...{ 
if (list.options[i].selected) 
...{ 
cnt++; 
} 
} 

return cnt; 
}  


// 清空列表 
function  ClearList(list) 
... { 
while (list.options.length > 0) 
...{ 
list.options[0] = null; 
} 
}  


// 删除列表选中项 
// 返回删除项的数量 
function  DelSelectedOptions(list) 
... { 
var i = 0; 
var deletedCnt = 0; 
while (i < list.options.length) 
...{ 
if (list.options[i].selected) 
...{ 
list.options[i] = null; 
deletedCnt++; 
} 
else 
...{ 
i++; 
} 
} 

return deletedCnt; 
}  
// 此函数查找相应的项是否存在 
// repeatCheck是否进行重复性检查 
// 若为"v"，按值进行重复值检查 
// 若为"t"，按文字进行重复值检查 
// 若为"vt"，按值和文字进行重复值检查 
// 其它值，不进行重复性检查，返回false 
function  OptionExists(list, optText, optValue, repeatCheck) 
... { 
var i = 0; 
var find = false; 

if (repeatCheck == "v") 
...{ 
//按值进行重复值检查 
for (i=0; i<list.options.length; i++) 
...{ 
if (list.options[i].value == optValue) 
...{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "t") 
...{ 
//按文字进行重复检查 
for (i=0; i<list.options.length; i++) 
...{ 
if (list.options[i].text == optText) 
...{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "vt") 
...{ 
//按值和文字进行重复检查 
for (i=0; i<list.options.length; i++) 
...{ 
if ((list.options[i].value == optValue) && (list.options[i].text == 

optText)) 
...{ 
find = true; 
break; 
} 
} 
} 

return find; 
}  


// 向列表中追加一个项 
// list 是要追加的列表 
// optText 和 optValue 分别表示项的文字和值 
// repeatCheck 是否进行重复性检查，参见 OptionExists 
// 添加成功返回 true，失败返回 false 
function  AppendOption(list, optText, optValue, repeatCheck) 
... { 
if (!OptionExists(list, optText, optValue, repeatCheck)) 
...{ 
list.options[list.options.length] = new Option(optText, optValue); 
return true; 
} 
else 
...{ 
return false; 
} 
}  


// 插入项 
// index 插入位置，当插入位置 >= 列表现有项数量时，其作用相当于不进行重复检

查的追加项 
// optText 和 optValue 分别表示项的文字和值 
function  InsertOption(list, index, optText, optValue) 
... { 
var i = 0; 
for (i=list.options.length; i>index; i--) 
...{ 
list.options[i] = new Option(list.options[i-1].text, list.options[i-

1].value); 
} 

list.options[index] = new Option(optText, optValue); 
}  
// 将一个列表中的项导到另一个列表中 
// repeatCheck是否进行重复性检查，参见OptionExists 
// deleteSource项导到目标后，是否删除源列表中的项 
// 返回影响的项数量 
function  ListToList(sList, dList, repeatCheck, deleteSource) 
... { 
//所影响的行数 
var lines = 0; 
var i = 0; 
while (i<sList.options.length) 
...{ 
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, 

sList.options[i].value, repeatCheck)) 
...{ 
//添加成功 
lines++; 
if (deleteSource) 
...{ 
//删除源列表中的项 
sList.options[i] = null; 
} 
else 
...{ 
i++; 
} 
} 
else 
...{ 
i++; 
} 
} 

return lines; 
}  


// 列表中选中项上移 
function  MoveSelectedOptionsUp(list) 
... { 
var i = 0; 
var value = ""; 
var text = ""; 
for (i=0; i<(list.options.length-1); i++) 
...{ 
if (!list.options[i].selected && list.options[i+1].selected) 
...{ 
value = list.options[i].value; 
text = list.options[i].text; 
list.options[i] = new Option(list.options[i+1].text, list.options

[i+1].value); 
list.options[i].selected = true; 
list.options[i+1] = new Option(text, value); 
} 
} 
}  


// 列表中选中项下移 
function  MoveSelectedOptionsDown(list) 
... { 
var i = 0; 
var value = ""; 
var text = ""; 
for (i=list.options.length-1; i>0; i--) 
...{ 


if (!list.options[i].selected && list.options[i-1].selected) 
...{ 
value = list.options[i].value; 
text = list.options[i].text; 
list.options[i] = new Option(list.options[i-1].text, list.options[i-

1].value); 
list.options[i].selected = true; 
list.options[i-1] = new Option(text, value); 
} 
} 
}