在HTML中select標簽如何實現單選和多選

這篇文章主要介紹了在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; 
} 
} 
}

感謝你能夠認真閱讀完這篇文章，希望小編分享在HTML中select標簽如何實現單選和多選內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!