這次為大家帶來在HTML中select標籤怎樣實現單選和多選,在HTML中select標籤實現單選和多選的注意事項有哪些,下面就是實戰案例,一起來看一下。
select 元素可建立單選或多選選單。當提交表單時,瀏覽器會提交選定的項目,或收集用逗號分隔的多個選項,將其合成一個單獨的參數列表,並且在將
<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
其中,標籤可以省掉,在頁面中用法
<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中文網其它相關文章!
相關閱讀:
怎麼實作meta標籤中的viewport來控制裝置螢幕的css屬性
以上是在HTML中select標籤怎樣實現單選和多選的詳細內容。更多資訊請關注PHP中文網其他相關文章!