99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章主要為大家展示了“HTML中的select標簽如何實現(xiàn)單選和多選”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“HTML中的select標簽如何實現(xiàn)單選和多選”這篇文章吧。

創(chuàng)新互聯(lián)專注于蕭縣企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城建設(shè)。蕭縣網(wǎng)站建設(shè)公司,為蕭縣等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

一、基本用法：

Volvo

Saab

Opel

Audi

其中，標簽可以省掉，在頁面中用法

全部

湖北電大網(wǎng)絡(luò)學習中心

成都師范學院網(wǎng)絡(luò)學習中心

武漢職業(yè)技術(shù)學院網(wǎng)絡(luò)學習中心

二、Select元素還可以多選，看如下代碼：

//有multiple屬性，則可以多選

高中

大學

博士

//下面沒有multiple屬性,只顯示一條，不能多選

高中

大學

博士

//下面是設(shè)置了size屬性的情況,如果size=3那么就顯示三條數(shù)據(jù)，注意不能多選的。

小學

初中

高中

中專

大專

本科

研究生

博士

博士后

請選擇

三、多選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顯示的內(nèi)容

@paramobjItemValue將要加入的item的值

functionaddOneItemToSelect(objSelectId,objItemText,objItemValue){

varobjSelect=document.getElementById(objSelectId);

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

//判斷是否該值的item已經(jīng)在select中存在

if(isSelectItemExit(objSelectId,objItemValue)){

$.messager.alert('提示消息','該值的選項已經(jīng)存在!','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標簽如何實現(xiàn)單選和多選”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：HTML中的select標簽如何實現(xiàn)單選和多選
文章URL：http://www.ef60e0e.cn/article/gedjed.html