JS增加SELECT节点
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
<!--
var newSelect = function(){
var td = document.getElementById("groupIdSelect");
var div = document.createElement("div")//创建DIV
var select = document.createElement("select");//创建SELECT节点
var oldSelect = document.getElementsByName("groupId")[0]; //获取原有的SELECT数据
for(var i =0;i<oldSelect.options.length;i++){
select.add(new Option(oldSelect.options[i].text,oldSelect.options[i].value));
}
var insertButton = document.createElement("input");//创建新增按钮
insertButton.setAttribute("value","新增");
insertButton.setAttribute("type","button");
var cancelButton = document.createElement("input");//创建取消按钮
cancelButton.setAttribute("value","取消");
cancelButton.setAttribute("type","button");
//将节点添加到父节点中
div.appendChild(select);
div.appendChild(insertButton);
div.appendChild(cancelButton);
//增加事件监听
if(window.addEventListener)
{
insertButton.addEventListener("click",function(){newSelect();}, true);
cancelButton.addEventListener("click",function(){removeSelect(div);}, true);
}
else
{
insertButton.attachEvent("onclick",function(){newSelect();});
cancelButton.attachEvent("onclick",function(){removeSelect(div);});
}
td.appendChild(div);
}
//删除SELECT
var removeSelect = function(oj){
var td = document.getElementById("groupIdSelect");
td.removeChild(oj);
}
//-->
</script>
</head>
<body>
<div id="groupIdSelect">
<div>
<select name="groupId" id="groupId" >
<option value="">-选择分组-</option>
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select><input type="button" value="新增" onclick="newSelect()" />
</div>
<div>
<select name="groupId">
<option value="">-选择分组-</option>
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
<option value="4">444</option>
<option value="5">555</option>
</select><input type="button" value="新增" onclick="newSelect()" /><input type="button" value="取消" onclick="removeSelect(this.parentNode);" />
</div>
</div>
</body>
</html>
效果：