JavaScript操作Select下拉列表完整指南：增删改查与全选反选

JavaScript操作Select下拉列表完整指南：增删改查与全选反选

本文旨在介绍JavaScript与Select元素交互的基础方法，供不熟悉JS的开发者参考。在实际开发中，负责表单结构设计的人员往往不仅需要构建程序逻辑和数据模型，还需兼顾表单样式设计及JavaScript编程；部分企业甚至要求开发者具备Photoshop技能，早期开发者通常需身兼多职。

以下示例基于非标准表单结构进行演示。

<form id="f"> <select size="1" name="s"> <option value="jb51.net">本站</option> <option value="baidu.com">百度</option> </select> </form>

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

<script type="text/javascript">
<!-- 
获取选项数量与选中状态var f = document.getElementById("f");
//获取Select选项总数
//方法一：通过options数组的length属性
document.write(f.s.options.length);
//方法二：直接访问select元素的length属性
document.write(f.s.length);
//获取当前选中项的索引（从0开始）
//若为多选模式，此方法返回第一个被选中项的索引
//方法一：通过options数组的selectedIndex属性
document.write(f.s.options.selectedIndex);
//方法二：直接访问select元素的selectedIndex属性
document.write(f.s.selectedIndex);
//检测指定索引的选项是否处于选中状态
document.write(f.s.options[0].selected);
//获取指定索引选项的值(value)和显示文本(text)
document.write(f.s.options[0].value);
document.write(f.s.options[1].text);
动态添加、删除与修改选项//删除指定索引的选项
//将对应索引赋值为null即可实现删除
f.s.options[1] = null;
//在列表末尾追加新选项
//使用new Option(text, value)构造函数创建新选项对象
f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");
//修改指定索引的选项内容
//方法一：替换整个option对象
f.s.options[1] = new Option("更改的text", "更改的value");
//方法二：直接修改现有option对象的text和value属性
//--> 
</script>
全选、反选与清空列表功能//实现列表全选功能
function SelectAllOption(list) 
{ 
for (var i=0; i<list.options.length; i++) 
{ 
//将每个选项的selected属性设为true
list.options[i].selected = true; 
} 
}
//实现列表反选功能（来源：jb51.net asp学习网）
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++) 
{ 
//遍历检查每个选项的selected属性
if (list.options[i].selected) 
{ 
cnt++; 
} 
}
return cnt; 
}
//清空列表中的所有选项
function ClearList(list) 
{ 
//循环删除直到列表为空
while (list.options.length > 0) 
{ 
//将第一个选项置为null以删除
list.options[0] = null; 
} 
}
删除选中项与重复性检查//删除列表中所有被选中的选项
//函数返回成功删除的选项数量
function DelSelectedOptions(list) 
{ 
var i = 0; 
var deletedCnt = 0; 
//遍历列表，注意删除后索引变化需特殊处理
while (i < list.options.length) 
{ 
if (list.options[i].selected) 
{ 
//删除当前选中项
delSelectedCnt++; 
list.options[i] = null; 
//删除后不增加索引，继续检查当前位置
} 
else 
{ 
i++; 
} 
}
return deletedCnt; 
} 
//检查指定选项是否存在于列表中
//参数repeatCheck控制重复检查类型
//"v"：仅按值(value)检查重复
//"t"：仅按文本(text)检查重复
//"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：插入位置的索引
//当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) 
{ 
//若需删除源项，则将其置为null
sList.options[i] = null; 
//注意：删除后索引i不变，继续检查当前位置
} 
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.jb51.net 
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); 
} 
} 
}