javascript操作select元素實例分析
本文實例講述了javascript操作select元素的用法。分享給大家供大家參考。具體分析如下:
這里熟悉一下js對select元素的操作,html頁面中建立一個form,其中包含一個select元素和submit按鈕。
當選擇select中某一項時改變其文字,當select中所有項的文字都改變后,重新恢復它們。
當按下submit時關(guān)閉窗口本身,代碼如下:
<!DOCTYPE html> <html> <head> <title>duang for select elements</title> <script type="text/javascript"> function do_change(elt){ var text = elt[elt.selectedIndex].innerHTML; if(!text.match(/\[/)) elt[elt.selectedIndex].innerHTML += " [duang]"; var is_all_seleted = true; for(var i=0;i<elt.length;++i){ if(!elt[i].innerHTML.match(/\[/)){ is_all_seleted = false; break; } } if(is_all_seleted){ alert("all duang!!!\nand reset it!!!"); for(var i=0;i<elt.length;++i){ elt[i].innerHTML = elt[i].innerHTML.replace(/\s\[.*\]/,"") } } } </script> </head> <body> <form id="frm_main" action="#" method="post"> <select id="slt" onchange="do_change(this);"> <option value="opt_1">opt A</option> <option value="opt_2">opt B</option> <option value="opt_3">opt C</option> <option value="opt_4">opt D</option> <option value="opt_5">opt E</option> </select> <input type="submit" value="close window" onclick="window.close();"/> </form> </body> </html>
在firefox中一開始貌似無法關(guān)閉窗口本身,后來發(fā)現(xiàn)在about:config中設置dom.allow_scripts_to_close_windows為true即可。
如果每個select中的選項變化沒有規(guī)律,則可以寫一個on_change_ex來處理,代碼如下:
function do_change_ex(me){ var text = me[me.selectedIndex].innerHTML; if(!text.match(/\[/)){ me[me.selectedIndex].text_bak = me[me.selectedIndex].innerHTML; me[me.selectedIndex].innerHTML += " [duang]"; me[me.selectedIndex].is_changed = true; } var is_all_seleted = true; for(var i=0;i<me.length;++i){ if(!me[i].is_changed){ is_all_seleted = false; break; } } if(is_all_seleted){ alert("all duang!!!\nand reset it!!!"); for(var i=0;i<me.length;++i){ me[i].innerHTML = me[i].text_bak; me[i].is_changed = false; } } }
希望本文所述對大家的javascript程序設計有所幫助。
- JavaScript操作select元素和option的實例代碼
- 獲取select元素被選中的文本內(nèi)容的js代碼
- js querySelector和getElementById通過id獲取元素的區(qū)別
- js獲取當前select 元素值的代碼
- js 獲取當前select元素值的代碼
- JavaScript Select和Option列表元素上下左右移動
- extjs 列表框(multiselect)的動態(tài)添加列表項的方法
- JS對HTML標簽select的獲取、添加、刪除操作
- 使用js對select動態(tài)添加和刪除OPTION示例代碼
- JavaScript實現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法
- JS動態(tài)添加與刪除select中的Option對象(示例代碼)
- JS & JQuery 動態(tài)添加 select option
- JavaScript實現(xiàn)向select下拉框中添加和刪除元素的方法
相關(guān)文章
JavaScript數(shù)組排序功能簡單實現(xiàn)
這篇文章主要介紹了JavaScript數(shù)組排序功能簡單實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05怎么讓腳本或里面的函數(shù)在所有圖片都載入完畢的時候執(zhí)行
怎么讓腳本或里面的函數(shù)在所有圖片都載入完畢的時候執(zhí)行...2006-10-10