select 元素可創建單選或多選菜單。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，并且在將 select 表單數據提交給服務器時包括 name 屬性。

一、基本用法：

 select  option html' target='_blank'>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; }

相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！

相關閱讀：

如何使用CSS對TD中INPUT的寬度設置

怎樣實現meta標簽中的viewport來控制設備屏幕的css屬性

html的表格比較寬溢出怎么設置

html怎樣用style添加屬性示例

html如何用超鏈接打開新窗口時控制其屬性

以上就是在HTML中select標簽怎樣實現單選和多選的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。