javascript如何操作HTML下拉列表標(biāo)簽
先給大家講下大概實(shí)現(xiàn)思路，具體內(nèi)容介紹請看下面。
判斷select選項(xiàng)中 是否存在Value="paraValue"的Item
向select選項(xiàng)中 加入一個(gè)Item
從select選項(xiàng)中 刪除一個(gè)Item
刪除select中選中的項(xiàng)
修改select選項(xiàng)中 value="paraValue"的text為"paraText"
設(shè)置select中text="paraText"的第一個(gè)Item為選中
設(shè)置select中value="paraValue"的Item為選中
得到select的當(dāng)前選中項(xiàng)的value
得到select的當(dāng)前選中項(xiàng)的text
得到select的當(dāng)前選中項(xiàng)的Index
清空select的項(xiàng)
js 代碼
// 1.判斷select選項(xiàng)中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit =false;
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
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("該Item的Value值已經(jīng)存在");
}else{
var varItem =new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}
// 3.從select選項(xiàng)中 刪除一個(gè)Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i =0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功刪除");
}else{
alert("該select中 不存在該項(xiàng)");
}
}
// 4.刪除select中選中的項(xiàng)
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length -1;
for(var i = length; i >=0; i--){
if(objSelect[i].selected ==true){
objSelect.options[i] =null;
}
}
}
// 5.修改select選項(xiàng)中 value="paraValue"的text為"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判斷是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i =0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
}else{
alert("該select中 不存在該項(xiàng)");
}
}
// 6.設(shè)置select中text="paraText"的第一個(gè)Item為選中
function jsSelectItemByValue(objSelect, objItemText) {
//判斷是否存在
var isExit =false;
for (var i =0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected =true;
isExit =true;
break;
}
}
//Show出結(jié)果
if (isExit) {
alert("成功選中");
}else{
alert("該select中 不存在該項(xiàng)");
}
}
// 7.設(shè)置select中value="paraValue"的Item為選中
document.all.objSelect.value = objItemValue;
// 8.得到select的當(dāng)前選中項(xiàng)的value
var currSelectValue = document.all.objSelect.value;
// 9.得到select的當(dāng)前選中項(xiàng)的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
// 10.得到select的當(dāng)前選中項(xiàng)的Index
var currSelectIndex = document.all.objSelect.selectedIndex;
// 11.清空select的項(xiàng)
document.all.objSelect.options.length =0;
以上內(nèi)容介紹了javascript操作html下拉列表標(biāo)簽的方法，希望大家喜歡本文所述。
- JS獲取下拉列表所選中的TEXT和Value的實(shí)現(xiàn)代碼
- extJs 文本框后面加上說明文字+下拉列表選中值后觸發(fā)事件
- javascript下拉列表菜單的實(shí)現(xiàn)方法
- javascript下拉列表中顯示樹形菜單的實(shí)現(xiàn)方法
- JS實(shí)現(xiàn)支持多選的遍歷下拉列表代碼
- JS+DIV+CSS實(shí)現(xiàn)仿表單下拉列表效果
- JS+CSS實(shí)現(xiàn)下拉列表框美化效果（3款）
- JS+CSS實(shí)現(xiàn)美化的下拉列表框效果
- jQuery實(shí)現(xiàn)在下拉列表選擇時(shí)獲取json數(shù)據(jù)的方法
- JS顯示下拉列表框內(nèi)全部元素的方法
- js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法(3種方法)
相關(guān)文章
php上傳圖片并給圖片打上透明水印的代碼，需要的朋友可以參考下。2010-06-06
這篇文章主要介紹了用js簡單提供增刪改查接口,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
javascript中的作用域(scope)和上下文(context)是這門語言的獨(dú)到之處，這部分歸功于他們帶來的靈活性。本文給大家介紹JavaScript中的作用域和上下文，感興趣的朋友一起學(xué)習(xí)2016-03-03
這篇文章介紹了jquery滾動條事件的簡單實(shí)例，有需要的朋友可以參考一下2013-07-07
微信小程序的宿主環(huán)境實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序的宿主環(huán)境,包括scroll-view 組件的基本使用，text 組件的基本使用及rich-text 組件的基本使用，本文通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
sortable中el-table拖拽及點(diǎn)擊箭頭上下移動row效果
這篇文章主要介紹了sortable中el-table拖拽及點(diǎn)擊箭頭上下移動row效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
微信小程序scroll-view實(shí)現(xiàn)自定義滾動條
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實(shí)現(xiàn)自定義滾動條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上下滑動輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在客戶端中，要對字符串編碼，可以采用：escape（）；encodeurl（）；encodeURIComponent（）；下面我們就來具體講解下這幾個(gè)方法。2015-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript分頁組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07