HTML中select标签单选多选用法详解

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 表单数据提交给服务器时包括 name 属性。

一、基本用法：

 
Volvo 
Saab 
Opel 
Audi 
 

其中，标签可以省掉，在页面中用法 

 

全部 

湖北电大网络学习中心 

成都师范学院网络学习中心 

武汉职业技术学院网络学习中心 

 

二、Select元素还可以多选，看如下代码： 

//有multiple属性，则可以多选 

 

高中 

大学 

博士 

 

//下面没有multiple属性 , 只显示一条，不能多选 

 

高中 

大学 

博士 

 

//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。 

 

小学 

初中 

高中 

中专 

大专 

本科 

研究生 

博士 

博士后 

请选择 

 

三、多选Select组件涉及的所有常用操作：

1. 判断select选项中是否存在指定值的Item 

@param objSelectId 将要验证的目标select组件的id 

@param objItemValue 将要验证是否存在的值 

function isSelectItemExit(objSelectId,objItemValue) { 

var objSelect = document.getElementById(objSelectId); 

var isExit = false; 

if (null != objSelect && typeof(objSelect) != "undefined") { 

for(var i=0;i

if(objSelect.options[i].value == objItemValue) { 

isExit = true; 

break; 

} 

} 

} 

return isExit; 

} 

2.向select选项中加入一个Item 

@param objSelectId 将要加入item的目标select组件的id 

@param objItemText 将要加入的item显示的内容 

@param objItemValue 将要加入的item的值 

function addOneItemToSelect(objSelectId,objItemText,objItemValue) { 

var objSelect = document.getElementById(objSelectId); 

if (null != objSelect && typeof(objSelect) != "undefined") { 

//判断是否该值的item已经在select中存在 

if(isSelectItemExit(objSelectId,objItemValue)) { 

$.messager.alert('提示消息','该值的选项已经存在!','info'); 

} else { 

var varItem = new Option(objItemText,objItemValue); 

objSelect.options.add(varItem); 

} 

} 

} 

3.从select选项中删除选中的项，支持多选多删 

@param objSelectId 将要进行删除的目标select组件id 

function removeSelectItemsFromSelect(objSelectId) { 

var objSelect = document.getElementById(objSelectId); 

var delNum = 0; 

if (null != objSelect && typeof(objSelect) != "undefined") { 

for(var i=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 

@param objSelectId 将要验证的目标select组件的id 

@param objItemValue 将要验证是否存在的值 

function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 

var objSelect = document.getElementById(objSelectId); 

if (null != objSelect && typeof(objSelect) != "undefined") { 

//判断是否存在 

if(isSelectItemExit(objSelect,objItemValue)) { 

for(var i=0;i

if(objSelect.options[i].value == objItemValue) { 

objSelect.options.remove(i); 

break; 

} 

} 

$.messager.alert('提示消息','成功删除!','info'); 

} else { 

$.messager.alert('提示消息','不存在指定值的选项!','info'); 

} 

} 

} 

5.清空select中的所有选项 

@param objSelectId 将要进行清空的目标select组件id 

function clearSelect(objSelectId) { 

var objSelect = document.getElementById(objSelectId); 

if (null != objSelect && typeof(objSelect) != "undefined") { 

for(var i=0;i

objSelect.options.remove(i); 

} 

} 

} 

6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开 

@param objSelectId 目标select组件id 

@return select中所有item的值，值与值之间用逗号隔开 

function getAllItemValuesByString(objSelectId) { 

var selectItemsValuesStr = ""; 

var objSelect = document.getElementById(objSelectId); 

if (null != objSelect && typeof(objSelect) != "undefined") { 

var length = objSelect.options.length 

for(var i = 0; i < length; i = i + 1) { 

if (0 == i) { 

selectItemsValuesStr = objSelect.options[i].value; 

} else { 

selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value; 

} 

} 

} 

return selectItemsValuesStr; 

} 

7. 将一个select中的所有选中的选项移到另一个select中去 

@param fromObjSelectId 移动item的原select组件id 

@param toObjectSelectId 移动item将要进入的目标select组件id 

function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 

var objSelect = document.getElementById(fromObjSelectId); 

var delNum = 0; 

if (null != objSelect && typeof(objSelect) != "undefined") { 

for(var i=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中去 

@param fromObjSelectId 移动item的原select组件id 

@param toObjectSelectId 移动item将要进入的目标select组件id 

function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 

var objSelect = document.getElementById(fromObjSelectId); 

if (null != objSelect) { 

for(var i=0;i

addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value) 

objSelect.options.remove(i); 

i = i - 1; 

} 

} 

} 

本文摘自http://www.jb51.net/web/167125.html