Volvo  Saab  Opel  Audi  

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





本文转载自中文网
 

推荐阅读