一、基本用法：
Volvo
Saab
Opel
Audi
其中，标签可以省掉，在页面中用法
全部
湖北电大网络学习中心
成都师范学院网络学习中心
武汉职业技术学院网络学习中心
二、Select元素还可以多选，看如下代码：
//有multiple属性，则可以多选
高中
大学
博士
//下面没有multiple属性,只显示一条，不能多选
高中
大学
博士
//下面是设置了size属性的情况,如果size=3那么就显示三条数据，注意不能多选的。
小学
初中
高中
中专
大专
本科
研究生
博士
博士后
请选择
三、多选Select组件涉及的所有常用操作：
1.判断select选项中是否存在指定值的Item
@paramobjSelectId将要验证的目标select组件的id
@paramobjItemValue将要验证是否存在的值
functionisSelectItemExit(objSelectId,objItemValue){
varobjSelect=document.getElementById(objSelectId);
varisExit=false;
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=0;i
if(objSelect.options[i].value==objItemValue){
isExit=true;
break;
}
}
}
returnisExit;
}
2.向select选项中加入一个Item
@paramobjSelectId将要加入item的目标select组件的id
@paramobjItemText将要加入的item显示的内容
@paramobjItemValue将要加入的item的值
functionaddOneItemToSelect(objSelectId,objItemText,objItemValue){
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
//判断是否该值的item已经在select中存在
if(isSelectItemExit(objSelectId,objItemValue)){
$.messager.alert('提示消息','该值的选项已经存在!','info');
}else{
varvarItem=newOption(objItemText,objItemValue);
objSelect.options.add(varItem);
}
}
}
3.从select选项中删除选中的项，支持多选多删
@paramobjSelectId将要进行删除的目标select组件id
functionremoveSelectItemsFromSelect(objSelectId){
varobjSelect=document.getElementById(objSelectId);
vardelNum=0;
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=0;i
if(objSelect.options[i].selected){
objSelect.options.remove(i);
delNum=delNum+1;
i=i-1;
}
}
if(delNum<=0){
$.messager.alert('提示消息','请选择你要删除的选项!','info');
}else{
$.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info');
}
}
}
4.从select选项中按指定的值删除一个Item
@paramobjSelectId将要验证的目标select组件的id
@paramobjItemValue将要验证是否存在的值
functionremoveItemFromSelectByItemValue(objSelectId,objItemValue){
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
//判断是否存在
if(isSelectItemExit(objSelect,objItemValue)){
for(vari=0;i
if(objSelect.options[i].value==objItemValue){
objSelect.options.remove(i);
break;
}
}
$.messager.alert('提示消息','成功删除!','info');
}else{
$.messager.alert('提示消息','不存在指定值的选项!','info');
}
}
}
5.清空select中的所有选项
@paramobjSelectId将要进行清空的目标select组件id
functionclearSelect(objSelectId){
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=0;i
objSelect.options.remove(i);
}
}
}
6.获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
@paramobjSelectId目标select组件id
@returnselect中所有item的值，值与值之间用逗号隔开
functiongetAllItemValuesByString(objSelectId){
varselectItemsValuesStr="";
varobjSelect=document.getElementById(objSelectId);
if(null!=objSelect&&typeof(objSelect)!="undefined"){
varlength=objSelect.options.length
for(vari=0;i
if(0==i){
selectItemsValuesStr=objSelect.options[i].value;
}else{
selectItemsValuesStr=selectItemsValuesStr+","+objSelect.options[i].value;
}
}
}
returnselectItemsValuesStr;
}
7.将一个select中的所有选中的选项移到另一个select中去
@paramfromObjSelectId移动item的原select组件id
@paramtoObjectSelectId移动item将要进入的目标select组件id
functionmoveAllSelectedToAnotherSelectObject(fromObjSelectId,toObjectSelectId){
varobjSelect=document.getElementById(fromObjSelectId);
vardelNum=0;
if(null!=objSelect&&typeof(objSelect)!="undefined"){
for(vari=0;i
if(objSelect.options[i].selected){
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i=i-1;
}
}
}
}
8.将一个select中的所有选项移到另一个select中去
@paramfromObjSelectId移动item的原select组件id
@paramtoObjectSelectId移动item将要进入的目标select组件id
functionmoveAllToAnotherSelectObject(fromObjSelectId,toObjectSelectId){
varobjSelect=document.getElementById(fromObjSelectId);
if(null!=objSelect){
for(vari=0;i
addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i=i-1;
}
}
}
本文转载自中文网
