首页 > 网络编程 > JavaScript > javascript技巧 > javascript HTML

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需刷新才能执行]