HTML中的select标签如何实现单选和多选

这篇文章主要为大家展示了“HTML中的select标签如何实现单选和多选”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML中的select标签如何实现单选和多选”这篇文章吧。

创新互联专注于萧县企业网站建设,响应式网站开发,商城建设。萧县网站建设公司,为萧县等地区提供建站服务。全流程按需搭建网站，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

一、基本用法：

Volvo

Saab

Opel

Audi

其中，标签可以省掉，在页面中用法

全部

湖北电大网络学习中心

成都师范学院网络学习中心

武汉职业技术学院网络学习中心

二、Select元素还可以多选，看如下代码：

//有multiple属性，则可以多选

高中

大学

博士

//下面没有multiple属性,只显示一条，不能多选

高中

大学

博士

//下面是设置了size属性的情况,如果size=3那么就显示三条数据，注意不能多选的。

小学

初中

高中

中专

大专

本科

研究生

博士

博士后

请选择

三、多选Select组件涉及的所有常用操作：

1.判断select选项中是否存在指定值的Item

@paramobjSelectId将要验证的目标select组件的id

@paramobjItemValue将要验证是否存在的值

functionisSelectItemExit(objSelectId,objItemValue){

varobjSelect=document.getElementById(objSelectId);

varisExit=false;

if(null!=objSelect&&typeof(objSelect)!="undefined"){

for(vari=0;i

if(objSelect.options[i].value==objItemValue){

isExit=true;

break;

}

}

}

returnisExit;

}

2.向select选项中加入一个Item

@paramobjSelectId将要加入item的目标select组件的id

@paramobjItemText将要加入的item显示的内容

@paramobjItemValue将要加入的item的值

functionaddOneItemToSelect(objSelectId,objItemText,objItemValue){

varobjSelect=document.getElementById(objSelectId);

if(null!=objSelect&&typeof(objSelect)!="undefined"){

//判断是否该值的item已经在select中存在

if(isSelectItemExit(objSelectId,objItemValue)){

$.messager.alert('提示消息','该值的选项已经存在!','info');

}else{

varvarItem=newOption(objItemText,objItemValue);

objSelect.options.add(varItem);

}

}

}

3.从select选项中删除选中的项，支持多选多删

@paramobjSelectId将要进行删除的目标select组件id

functionremoveSelectItemsFromSelect(objSelectId){

varobjSelect=document.getElementById(objSelectId);

vardelNum=0;

if(null!=objSelect&&typeof(objSelect)!="undefined"){

for(vari=0;i

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

@paramobjSelectId将要验证的目标select组件的id

@paramobjItemValue将要验证是否存在的值

functionremoveItemFromSelectByItemValue(objSelectId,objItemValue){

varobjSelect=document.getElementById(objSelectId);

if(null!=objSelect&&typeof(objSelect)!="undefined"){

//判断是否存在

if(isSelectItemExit(objSelect,objItemValue)){

for(vari=0;i

if(objSelect.options[i].value==objItemValue){

objSelect.options.remove(i);

break;

}

}

$.messager.alert('提示消息','成功删除!','info');

}else{

$.messager.alert('提示消息','不存在指定值的选项!','info');

}

}

}

5.清空select中的所有选项

@paramobjSelectId将要进行清空的目标select组件id

functionclearSelect(objSelectId){

varobjSelect=document.getElementById(objSelectId);

if(null!=objSelect&&typeof(objSelect)!="undefined"){

for(vari=0;i

objSelect.options.remove(i);

}

}

}

6.获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开

@paramobjSelectId目标select组件id

@returnselect中所有item的值，值与值之间用逗号隔开

functiongetAllItemValuesByString(objSelectId){

varselectItemsValuesStr="";

varobjSelect=document.getElementById(objSelectId);

if(null!=objSelect&&typeof(objSelect)!="undefined"){

varlength=objSelect.options.length

for(vari=0;i

if(0==i){

selectItemsValuesStr=objSelect.options[i].value;

}else{

selectItemsValuesStr=selectItemsValuesStr+","+objSelect.options[i].value;

}

}

}

returnselectItemsValuesStr;

}

7.将一个select中的所有选中的选项移到另一个select中去

@paramfromObjSelectId移动item的原select组件id

@paramtoObjectSelectId移动item将要进入的目标select组件id

functionmoveAllSelectedToAnotherSelectObject(fromObjSelectId,toObjectSelectId){

varobjSelect=document.getElementById(fromObjSelectId);

vardelNum=0;

if(null!=objSelect&&typeof(objSelect)!="undefined"){

for(vari=0;i

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中去

@paramfromObjSelectId移动item的原select组件id

@paramtoObjectSelectId移动item将要进入的目标select组件id

functionmoveAllToAnotherSelectObject(fromObjSelectId,toObjectSelectId){

varobjSelect=document.getElementById(fromObjSelectId);

if(null!=objSelect){

for(vari=0;i

addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)

objSelect.options.remove(i);

i=i-1;

}

}

}

以上是“HTML中的select标签如何实现单选和多选”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！