在HTML里select标签有哪些用法

2020-03-24 18:31:37

字体：大中小

来源：转载

供稿：网友

这次给大家带来在HTML里select标签有哪些用法，在HTML里使用select标签的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

相信看了这些案例你已经掌握了方法，更多精彩请关注php 其它相关文章！