javascript HTML操作代码

时间：2022-02-28 09:20:32|栏目：JavaScript代码|点击：次

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

上一篇：[js高手之路]HTML标签解释成DOM节点的实现方法

栏目：JavaScript代码

下一篇：小程序异步问题之多个网络请求依次执行并依次收集请求结果

本文标题：javascript HTML操作代码

本文地址：http://www.codeinn.net/misctech/194781.html

更多JavaScript代码

JavaScript代码

javascript HTML操作代码

阅读排行

推荐教程