小編給大家分享一下在HTML里select標(biāo)簽如何使用，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

公司專注于為企業(yè)提供網(wǎng)站制作、做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、購(gòu)物商城網(wǎng)站建設(shè)，微信小程序開(kāi)發(fā)，軟件按需開(kāi)發(fā)網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，成都創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

select 元素可創(chuàng)建單選或多選菜單。當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將 <select> 表單數(shù)據(jù)提交給服務(wù)器時(shí)包括 name 屬性。

一、基本用法：

<select> 
<option value ="volvo">Volvo</option> 
<option value ="saab">Saab</option> 
<option value="opel">Opel</option> 
<option value="audi">Audi</option> 
</select>

其中，</option>標(biāo)簽可以省掉，在頁(yè)面中用法

<SELECT NAME="studyCenter" id="studyCenter" SIZE="1"> 
<OPTION VALUE="0">全部 
<OPTION VALUE="1">湖北電大網(wǎng)絡(luò)學(xué)習(xí)中心 
<OPTION VALUE="2">成都師范學(xué)院網(wǎng)絡(luò)學(xué)習(xí)中心 
<OPTION VALUE="3">武漢職業(yè)技術(shù)學(xué)院網(wǎng)絡(luò)學(xué)習(xí)中心 
</SELECT>

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

//有multiple屬性，則可以多選 
<select name= “education” id=”education” multiple=”multiple”> 
<option value=”1”>高中</option> 
<option value=”2”>大學(xué)</option> 
<option value=”3”>博士</option> 
</select> 
//下面沒(méi)有multiple屬性 , 只顯示一條，不能多選 
<select name= “education” id=”education” > 
<option value=”1”>高中</option> 
<option value=”2”>大學(xué)</option> 
<option value=”3”>博士</option> 
</select> 
//下面是設(shè)置了size屬性的情況 , 如果size = 3 那么就顯示三條數(shù)據(jù)，注意不能多選的。 
<select name="education" id="education" size='3'> 
<option value="0">小學(xué)</option> 
<option value="1">初中</option> 
<option value="2">高中</option> 
<option value="3">中專</option> 
<option value="4">大專</option> 
<option value="5">本科</option> 
<option value="6">研究生</option> 
<option value="7">博士</option> 
<option value="8">博士后</option> 
<option selected>請(qǐng)選擇</option> 
</select>

1. 判斷select選項(xiàng)中是否存在指定值的Item

@param objSelectId 將要驗(yàn)證的目標(biāo)select組件的id 
@param objItemValue 將要驗(yàn)證是否存在的值 
function isSelectItemExit(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
var isExit = false; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;i++) { 
if(objSelect.options[i].value == objItemValue) { 
isExit = true; 
break; 
} 
} 
} 
return isExit; 
}

2.向select選項(xiàng)中加入一個(gè)Item

@param objSelectId 將要加入item的目標(biāo)select組件的id @param objItemText 將要加入的item顯示的內(nèi)容 @param objItemValue 將要加入的item的值 function addOneItemToSelect(objSelectId,objItemText,objItemValue) { var objSelect = document.getElementById(objSelectId); if (null != objSelect && typeof(objSelect) != "undefined") { //判斷是否該值的item已經(jīng)在select中存在 if(isSelectItemExit(objSelectId,objItemValue)) { $.messager.alert('提示消息','該值的選項(xiàng)已經(jīng)存在!','info'); } else { var varItem = new Option(objItemText,objItemValue); objSelect.options.add(varItem); } } }

3.從select選項(xiàng)中刪除選中的項(xiàng)，支持多選多刪

@param objSelectId 將要進(jìn)行刪除的目標(biāo)select組件id 
function removeSelectItemsFromSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
var delNum = 0; 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=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('提示消息','請(qǐng)選擇你要?jiǎng)h除的選項(xiàng)!','info'); 
} else { 
$.messager.alert('提示消息','成功刪除了'+delNum+'個(gè)選項(xiàng)!','info'); 
} 
} 
}

4.從select選項(xiàng)中按指定的值刪除一個(gè)Item

@param objSelectId 將要驗(yàn)證的目標(biāo)select組件的id 
@param objItemValue 將要驗(yàn)證是否存在的值 
function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
//判斷是否存在 
if(isSelectItemExit(objSelect,objItemValue)) { 
for(var i=0;i<objSelect.options.length;i++) { 
if(objSelect.options[i].value == objItemValue) { 
objSelect.options.remove(i); 
break; 
} 
} 
$.messager.alert('提示消息','成功刪除!','info'); 
} else { 
$.messager.alert('提示消息','不存在指定值的選項(xiàng)!','info'); 
} 
} 
}

5.清空select中的所有選項(xiàng)

@param objSelectId 將要進(jìn)行清空的目標(biāo)select組件id 
function clearSelect(objSelectId) { 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
for(var i=0;i<objSelect.options.length;) { 
objSelect.options.remove(i); 
} 
} 
}

6. 獲取select中的所有item，并且組裝所有的值為一個(gè)字符串，值與值之間用逗號(hào)隔開(kāi)

@param objSelectId 目標(biāo)select組件id 
@return select中所有item的值，值與值之間用逗號(hào)隔開(kāi) 
function getAllItemValuesByString(objSelectId) { 
var selectItemsValuesStr = ""; 
var objSelect = document.getElementById(objSelectId); 
if (null != objSelect && typeof(objSelect) != "undefined") { 
var length = objSelect.options.length 
for(var i = 0; i < length; i = i + 1) { 
if (0 == i) { 
selectItemsValuesStr = objSelect.options[i].value; 
} else { 
selectItemsValuesStr = selectItemsValuesStr + "," + objSelect.options[i].value; 
} 
} 
} 
return selectItemsValuesStr; 
}

看完了這篇文章，相信你對(duì)在HTML里select標(biāo)簽如何使用有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享題目：在HTML里select標(biāo)簽如何使用
URL地址：http://aaarwkj.com/article20/psoejo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)頁(yè)設(shè)計(jì)公司、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)