您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“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標簽如何實現單選和多選”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。