HTML中的select标签如何实现单选和多选
这篇文章主要为大家展示了"HTML中的select标签如何实现单选和多选"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"HTML中的select标签如何实现单选和多选"这篇文章吧。
一、基本用法：
其中，标签可以省掉，在页面中用法
二、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标签如何实现单选和多选"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
