HTML中select标识单选多采用法详解

select 元素可建立单选或多选菜单。当递交表单时,访问器会递交选定的新项目,或搜集用逗号隔开的好几个选项,将其生成1个独立的主要参数目录,而且在将 <select> 表奇数据递交给服务器时包含 name 特性。

1、基础用法:

拷贝编码
编码以下:

<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>

2、Select元素还能够多选,看以下编码:

拷贝编码
编码以下:

//有multiple特性,则能够多选
<select name= “education” id=”education” multiple=”multiple”>
<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面沒有multiple特性 , 只显示信息1条,不可以多选
<select name= “education” id=”education” >
<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面是设定了size特性的状况 , 假如size = 3 那末就显示信息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>

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<objSelect.options.length;i++) {
if(objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
}
return isExit;
}

2.向select选项中添加1个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选项中按特定的值删掉1个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,而且拼装全部的值为1个标识符串,值与值之间用逗号分隔

拷贝编码
编码以下:

@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. 将1个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. 将1个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;
}
}
}