javascript如何操作HTML下拉列表標(biāo)簽
先給大家講下大概實(shí)現(xiàn)思路,具體內(nèi)容介紹請(qǐng)看下面。
判斷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)文章
JavaScript知識(shí)點(diǎn)總結(jié)(五)之Javascript中兩個(gè)等于號(hào)(==)和三個(gè)等于號(hào)(===)的區(qū)別
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(五)之Javascript中兩個(gè)等于號(hào)(==)和三個(gè)等于號(hào)(===)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-05-05firefox TBODY 用js顯示和隱藏時(shí)出現(xiàn)錯(cuò)位的解決方法
今天幫別人寫一個(gè)網(wǎng)頁,發(fā)現(xiàn):當(dāng)用javascript動(dòng)態(tài)設(shè)置tr.style.display = "block"顯示某行時(shí),使用IE瀏覽沒有問題,但使用firefox瀏覽時(shí)該行被移到了其它行的后面,很是詫異。2008-12-12基于JavaScript實(shí)現(xiàn)生成名片、鏈接等二維碼
本文使用javascript技術(shù)實(shí)現(xiàn)生成名片、鏈接等二維碼的代碼,代碼簡(jiǎn)單易懂并附有注釋,需要的朋友可以參考下本文2015-09-09原生javascript制作的拼圖游戲?qū)崿F(xiàn)方法詳解
這篇文章主要介紹了原生javascript制作的拼圖游戲?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript制作拼圖游戲的相關(guān)步驟、原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02javascript將中國數(shù)字格式轉(zhuǎn)換成歐式數(shù)字格式的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨avascript將中國數(shù)字格式轉(zhuǎn)換成歐式數(shù)字格式的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08