這次給大家帶來在HTML中select标簽怎樣實作單選和多選，在HTML中select标簽實作單選和多選的注意事項有哪些，下面就是實戰案例，一起來看一下。
select 元素可建立單選或多選菜單。當送出表單時，浏覽器會送出標明的項目，或者收集用逗号分隔的多個選項，将其合成一個單獨的參數清單，并且在将 表單資料送出給伺服器時包括 name 屬性。
一、基本用法：
Volvo
Saab
Opel
Audi
其中，标簽可以省掉，在頁面中用法
全部
湖北電大網絡學習中心
成都師範學院網絡學習中心
武漢職業技術學院網絡學習中心
二、Select元素還可以多選，看如下代碼：//有multiple屬性，則可以多選
高中
大學
博士
//下面沒有multiple屬性 , 隻顯示一條，不能多選
高中
大學
博士
//下面是設定了size屬性的情況 , 如果size = 3 那麼就顯示三條資料，注意不能多選的。
國小
國中
高中
中專
大專
大學
研究所學生
博士
博士後
請選擇
三、多選Select元件涉及的所有常用操作：
1. 判斷select選項中是否存在指定值的[email protected] 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選項中加入一個[email protected] 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選項中按指定的值删除一個[email protected] 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;
}
}
}
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：