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

转载于:https://www.cnblogs.com/wanlang/archive/2007/08/16/858748.html