<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add New Product</title>
<link href="../css/public.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h2>SUPREMA</h2>
<ul id="nav">
<li><a href="index.asp">Home</a></li>
<li><a href="product.asp">Product</a></li>
<li><a href="Manager.asp">Manager</a></li>
</ul>
</div>
<div id="center">
<div id="left">
<ul>
<li><a href="product.asp">Product List</a></li>
<li><a href="product_new.asp">Product Add New</a></li>
<li><a href="product_class.asp">Product Class</a></li>
</ul>
</div>
<div id="right">
<form id="form1" action="product_new_p.asp" method="post">
<table>
<caption>New Prodcut Infomation</caption>
<tr>
<td>Product ID:</td>
<td><input name="txtId" type="text" maxlength="20" /></td>
</tr>
<tr>
<td>Product Name:</td>
<td><input name="txtName" type="text" maxlength="20" /></td>
</tr>
<tr>
<td>Intro:</td>
<td><input name="txtIntro" type="text" maxlength="20" /></td>
</tr>
<tr>
<td>Class:</td>
<td><select name="menu1" id="menu1" onBlur="m1Chg(this.options[this.options.selectedIndex].value)">
<option value="">Select</option>
<option value="A">Aromatherapy</option>
<option value="B">Household</option>
<option value="C">Healthy and Beauty</option>
<option value="D">Home Care</option>
</select>
<script>
function m1Chg(s)
{
var op=document.getElementById('menu2').getElementsByTagName('option');
for (var i=0; i<op.length; i++){
if(op[i].className!=s){
//op[i].parentNode.removeChild(op[i]);
//i--;
}
}
}
</script>
<select name="menu2" id="menu2">
<option value="">Select</option>
<option class="A" value="A01">Aroma Humidifier</option>
<option class="A" value="A02">USB Humidifier</option>
<option class="A" value="A03">Aroma Diffuser</option>
<option class="A" value="A04">Essential Oil</option>
<option class="B" value="B01">Ultrasonic Cleaner</option>
<option class="B" value="B02">Deodorizer</option>
<option class="B" value="B03">Air Purifiers</option>
<option class="B" value="B04">Powerbank</option>
<option class="C" value="C01">Heat Therapy</option>
<option class="C" value="C02">Light Therapy</option>
<option class="C" value="C03">Oral Care</option>
<option class="D" value="D01">Thermometer</option>
<option class="D" value="D02">Entry Alarm</option>
<option class="D" value="D03">Eye Care</option>
<option class="D" value="D04">Sensor Light</option>
</select>
</td>
</tr>
</table>
<input name="btnOK" type="submit" value="NEXT" />
</form>
</div>
</div>
</body>
</html>
以上为我的代码，请各位大虾帮帮忙，谢谢！
<script>
function m1Chg(s)
{
var k = 0;
var op=document.getElementById('menu2').getElementsByTagName('option');
var arr = []; //用来保存删除的元素
for (var i=0; i<op.length; i++){
if(op[i].className!=s){
if(k == 0){arr.push(op[i]); k++}
if(arr.length != 0){
for(var j = 0; j < arr.length; j++){
if(arr[j].className != op[i].className){
//比较数组arr中是否没有被删除元素，如果没有添加
arr.push(op[i]);
}
}
}
//op[i].parentNode.removeChild(op[i]);
//i--;
}
}
}
</script>
我给你写了个思路 然后你在写相应的事件把arr循环，添加到select里就成了
就像下面这样
var removeElement=op[i].parentNode.removeChild(op[i]);
想对removeElement进行任何操作都可以，就是再插入到文档中也行。