文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

  一、基本用法:

  <select>

  <optionvalue="volvo">Volvo</option>

  <optionvalue="saab">Saab</option>

  <optionvalue="opel">Opel</option>

  <optionvalue="audi">Audi</option>

  </select>

  其中,</option>标签可以省掉,在页面中用法

  <SELECTNAME="studyCenter"id="studyCenter"SIZE="1">

  <OPTIONVALUE="0">全部

  <OPTIONVALUE="1">湖北电大网络学习中心

  <OPTIONVALUE="2">成都师范学院网络学习中心

  <OPTIONVALUE="3">武汉职业技术学院网络学习中心

  </SELECT>

  二、Select元素还可以多选,看如下代码:

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

  <selectname=“education”id=”education”multiple=”multiple”>

  <optionvalue=”1”>高中</option>

  <optionvalue=”2”>大学</option>

  <optionvalue=”3”>博士</option>

  </select>

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

  <selectname=“education”id=”education”>

  <optionvalue=”1”>高中</option>

  <optionvalue=”2”>大学</option>

  <optionvalue=”3”>博士</option>

  </select>

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

  <selectname="education"id="education"size='3'>

  <optionvalue="0">小学</option>

  <optionvalue="1">初中</option>

  <optionvalue="2">高中</option>

  <optionvalue="3">中专</option>

  <optionvalue="4">大专</option>

  <optionvalue="5">本科</option>

  <optionvalue="6">研究生</option>

  <optionvalue="7">博士</option>

  <optionvalue="8">博士后</option>

  <optionselected>请选择</option>

  </select>

  三、多选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<objSelect.options.length;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<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

  @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<objSelect.options.length;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.length;){

  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<length;i=i+1){

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

  @paramfromObjSelectId移动item的原select组件id

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

  functionmoveAllToAnotherSelectObject(fromObjSelectId,toObjectSelectId){

  varobjSelect=document.getElementById(fromObjSelectId);

  if(null!=objSelect){

  for(vari=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;

  }

  }

  }

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯