javascript对下拉列表框(select)的操作实例讲解

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

这篇文章，主要是关于javascript和select相关的最基本方法，以供不熟悉javascript的人参考。常见的情况是，提出表单结构的人， 不仅仅需要为程序设计逻辑，创建数据结构，还需要设计表单的样式，以及熟悉javascript；某些公司可能会要求您精通photoshop：最初的时候，我们都是全才。

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

 
 
脚本学堂 
百度 
 

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

复制代码代码如下:

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

//反选列表中的项 by jbxue.com 脚本学堂 
function DeSelectOptions(list) 
{ 
for (var i=0; i { 
list.options[i].selected = !list.options[i].selected; 
} 
}

//返回列表中选择项数目 
function GetSelectedOptionsCnt(list) 
{ 
var cnt = 0; 
var i = 0; 
for (i=0; 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 { 
if (list.options[i].value == optValue) 
{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "t") 
{ 
//按文字进行重复检查 
for (i=0; i { 
if (list.options[i].text == optText) 
{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "vt") 
{ 
//按值和文字进行重复检查 
for (i=0; 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 { 
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--) 
{

//www.cwqu.com 
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); 
} 
} 
}