原标题：HTML中select标签单选多选用法详解
select 元素可创立单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或许搜集用逗号分隔的多个选项，将其组成一个独自的参数列表，而且在将 <select> 表单数据提交给服务器时包含 name 特点。
一、根本用法：
仿制代码
代码如下:
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
其间，</option>标签能够省掉，在页面中用法
仿制代码
代码如下:
<SELECT NAME="studyCenter" id="studyCenter" SIZE="1">
<OPTION VALUE="0">悉数
<OPTION VALUE="1">湖北电大网络学习中心
<OPTION VALUE="2">成都师范学院网络学习中心
<OPTION VALUE="3">武汉工作技术学院网络学习中心
</SELECT>
二、Select元素还能够多选，看如下代码：
仿制代码
代码如下:
//有multiple特点，则能够多选
<select name= “education” id=”education” multiple=”multiple”>
<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面没有multiple特点 , 只显现一条，不能多选
<select name= “education” id=”education” >
<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面是设置了size特点的状况 , 假如size = 3 那么就显现三条数据，留意不能多选的。
<select name="education" id="education" size='3'>
<option value="0">小学</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">中专</option>
<option value="4">大专</option>
<option value="5">本科</option>
<option value="6">研究生</option>
<option value="7">博士</option>
<option value="8">博士后</option>
<option selected>请挑选</option>
</select>
三、多选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<objSelect.options.length;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<objSelect.options.length;i=i+1) {
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<objSelect.options.length;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.length;) {
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<objSelect.options.length;i=i+1) {
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<objSelect.options.length;i=i+1) {
addoneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)
objSelect.options.remove(i);
i = i - 1;
}
}
}
本文由建站免费资料圈sucaiq.com共享！！！
假如我们有任何疑问请给我留言，小编会及时回复我们的。在此也非常感谢我们对资料圈的支撑！若你觉得本文对你有协助，欢迎转载，烦请注明出处，谢谢！
责任编辑：
