javascript HTML操作代码

更新时间：2008年11月10日 22:31:40 作者：

用 js操作html标签的一些代码，大家可以运行后查看效果

<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需再刷新一下页面才能执行]

Javascript之面向对象--接口
本篇文章实例演示了Javascript的面向对象--接口的用法。希望对大家有所帮助，下面就随小编一起来看看吧
2016-12-12
js制作轮播图效果
这篇文章主要为大家详细介绍了js制作轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
JavaScript实现单例模式实例分享
这篇文章主要介绍了JavaScript实现单例模式实例以及代码讲解，有需要的读者们跟着学习参考下吧。
2017-12-12
Javascript的一种模块模式
全局变量是魔鬼。在YUI中，我们仅用两个全局变量：YAHOO和YAHOO_config。YUI的一切都是使用YAHOO对象级的成员或这个成员作用域内的变量。我们建议在你的应用程序也使用类似的规则。
2010-09-09
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载...
2007-08-08
js与css的阻塞问题详析
JS具有阻塞特性,当浏览器在执行js代码时,不能同时做其它事情,下面这篇文章主要给大家介绍了关于js与css阻塞问题的相关资料,需要的朋友可以参考下
2021-07-07
js 火狐下取本地路径实现思路
火狐下取本地全路径使用js代码实现，感兴趣的朋友可以参考下哈，希望可以帮助到你
2013-04-04
微信小程序自定义scroll-view的实例代码
这篇文章主要给大家介绍了关于微信小程序自定义scroll-view的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
微信小程序之裁剪图片成圆形的实现代码
最近在开发小程序，产品经理提了一个需求，要求微信小程序换头像，用户剪裁图片必须是圆形。这篇文章主要介绍了微信小程序之裁剪图片成圆形 ,需要的朋友可以参考下
2018-10-10
浅谈js中调用函数时加不加括号的问题
下面小编就为大家带来一篇浅谈js中调用函数时加不加括号的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07