javascript HTML操作代碼

更新時間：2008年11月10日 22:31:40 作者：

用 js操作html標(biāo)簽的一些代碼，大家可以運(yùn)行后查看效果

<html> <head> <title>123123</title> <script type="text/javascript" language="javascript"> function change(obj){ clearOption(obj); for(var i=0; i<obj.options.length;i++){ if(obj.options[i].value == obj.value){ if(obj.options[i].value != ""){ document.getElementById("aa").value = obj.options[i].text; document.getElementById("bb").value = obj.options[i].value; document.getElementById("cc").value = i; obj.options[0].selected = true; break; } } } } function creatOptgroup(obj){ var hiddenValue = document.getElementById("bb").value; for(var i=0; i<obj.options.length;i++){ if(obj.options[i].value == hiddenValue && hiddenValue != ""){ var group = document.createElement("OPTGROUP"); group.label = obj.options[i].text; obj.insertBefore(group,obj.options(i)); obj.removeChild(obj.options[i]); } } } function clearOption(obj){ if(document.getElementById("bb").value != ""){ var v = document.getElementById("bb").value; var t = document.getElementsByTagName("OPTGROUP")[0].label; var tmpIndex = document.getElementById("cc").value; var o = new Option(t,v,false,false); obj.insertBefore(o,document.getElementsByTagName("OPTGROUP")[0]); obj.options[tmpIndex].text = t; obj.removeChild(document.getElementsByTagName("OPTGROUP")[0]); } document.getElementById("aa").value = ""; document.getElementById("bb").value = ""; document.getElementById("cc").value = ""; } </script> </head> <body> <form> <input type="input" id="aa" value="" readonly="readonly"/> <input type="hidden" id="bb" value="" /> <input type="hidden" id="cc" value="" /> <select style="width: 135px;" id="select" onchange="change(this);creatOptgroup(this);"> <option value="">添加到分類</option> <option value="1">禮品</option> <option value="2" >十二生肖</option> <option value="3" >十二生肖1</option> <option value="4" >十二生肖2</option> </select> <input type="button" id="del" value="刪除分類" onclick="clearOption(document.getElementById('select'));"/> </form> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

相關(guān)文章

原生js編寫焦點圖效果
這篇文章主要為大家詳細(xì)介紹了原生js編寫焦點圖效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
在JavaScript中實現(xiàn)類的方式探討
在 javascript 中有很多方式來創(chuàng)建對象，所以創(chuàng)建對象的方式使用起來非常靈活，到底哪一種方式是最恰當(dāng)呢？下面為大家講講
2013-08-08
整理關(guān)于Bootstrap導(dǎo)航的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
微信小程序?qū)崿F(xiàn)banner圖輪播效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-02-02
JS運(yùn)行耗時操作的延時顯示方法
今天用JS允許一個ActiveX，挺耗時的，想在允許時提示用戶正在允許，而不至于漏斗在那里
2010-11-11
詳解微信小程序開發(fā)之城市選擇器城市切換
這篇文章主要介紹了詳解微信小程序開發(fā)之城市選擇器城市切換，非常具有實用價值，需要的朋友可以參考下。
2017-01-01
uniapp封裝axios的詳細(xì)過程(大可不必那么麻煩)
在uniapp中使用axios進(jìn)行請求時,uniapp無法使用axios的適配器,下面這篇文章主要給大家介紹了關(guān)于uniapp封裝axios的詳細(xì)過程,需要的朋友可以參考下
2022-10-10
js隱式全局變量造成的bug示例代碼
一段js代碼遇到一個bug，由于中間的隱式全局變量造成的，通過谷歌瀏覽器的js調(diào)試器才找到問題所在，下面將代碼與大家分享下
2014-04-04
小程序?qū)崿F(xiàn)搜索框功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)搜索框功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)
這篇文章主要介紹了JS如何獲取指定范圍內(nèi)的隨機(jī)數(shù)含小數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12