91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML中的select標簽如何實現單選和多選

發布時間:2022-03-11 14:27:11 來源:億速云 閱讀:4411 作者:小新 欄目:web開發

這篇文章主要為大家展示了“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標簽如何實現單選和多選”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

仁寿县| 和硕县| 宿州市| 茌平县| 定州市| 安平县| 喀喇| 平武县| 年辖:市辖区| 桐乡市| 灵石县| 哈巴河县| 团风县| 新乡县| 闻喜县| 昆明市| 沂南县| 博白县| 拜泉县| 大足县| 博湖县| 杨浦区| 堆龙德庆县| 汪清县| 高淳县| 铅山县| 湘潭县| 营山县| 秭归县| 宜都市| 磐安县| 景宁| 河池市| 佳木斯市| 二连浩特市| 大田县| 阜平县| 东兰县| 阳泉市| 原阳县| 萨迦县|