html单选框为啥能多选,在HTML中select标签怎样实现单选和多选

这次给大家带来在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

三、多选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教程