javascript操作select元素實(shí)例分析
本文實(shí)例講述了javascript操作select元素的用法。分享給大家供大家參考。具體分析如下:
這里熟悉一下js對(duì)select元素的操作,html頁面中建立一個(gè)form,其中包含一個(gè)select元素和submit按鈕。
當(dāng)選擇select中某一項(xiàng)時(shí)改變其文字,當(dāng)select中所有項(xiàng)的文字都改變后,重新恢復(fù)它們。
當(dāng)按下submit時(shí)關(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中設(shè)置dom.allow_scripts_to_close_windows為true即可。
如果每個(gè)select中的選項(xiàng)變化沒有規(guī)律,則可以寫一個(gè)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; } } }
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript操作select元素和option的實(shí)例代碼
- 獲取select元素被選中的文本內(nèi)容的js代碼
- js querySelector和getElementById通過id獲取元素的區(qū)別
- js獲取當(dāng)前select 元素值的代碼
- js 獲取當(dāng)前select元素值的代碼
- JavaScript Select和Option列表元素上下左右移動(dòng)
- extjs 列表框(multiselect)的動(dòng)態(tài)添加列表項(xiàng)的方法
- JS對(duì)HTML標(biāo)簽select的獲取、添加、刪除操作
- 使用js對(duì)select動(dòng)態(tài)添加和刪除OPTION示例代碼
- JavaScript實(shí)現(xiàn)將數(shù)組數(shù)據(jù)添加到Select下拉框的方法
- JS動(dòng)態(tài)添加與刪除select中的Option對(duì)象(示例代碼)
- JS & JQuery 動(dòng)態(tài)添加 select option
- JavaScript實(shí)現(xiàn)向select下拉框中添加和刪除元素的方法
相關(guān)文章
JavaScript數(shù)組排序功能簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了JavaScript數(shù)組排序功能簡(jiǎn)單實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
這篇文章主要介紹了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能,涉及javascript面向?qū)ο笈c頁面元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12怎么讓腳本或里面的函數(shù)在所有圖片都載入完畢的時(shí)候執(zhí)行
怎么讓腳本或里面的函數(shù)在所有圖片都載入完畢的時(shí)候執(zhí)行...2006-10-10