在选择1group 最右边的窗口出现a和s选择2group 最右边的窗口出现f和g
要怎么实现啊很急~<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>选择项目组成员</title>
<link rel="stylesheet" type="text/css" href="bg.css" media="screen" /><script language="javascript">function Add(){
if(dltProject.selectedIndex==-1) {alert("请选择项目名称!");return;};
if(dltDepartment.selectedIndex==-1) {alert("请选择技术部门!");return;};
if(dltMember.selectedIndex==-1) {alert("请选择组员!");return;}; var newRowPos=tbCondition.rows.length;
if(curRow) newRowPos=curRow.rowIndex+1; var newRow=tbCondition.insertRow(newRowPos);
newRow.attachEvent("onclick",SelectRow); var newCell=newRow.insertCell();
newCell.attachEvent("onclick",EditTd); newCell=newRow.insertCell();
newCell.attachEvent("onclick",EditTd); newCell=newRow.insertCell();
newCell.attachEvent("onclick",EditTd); newRow.insertCell();
newRow.cells[0].innerText=dltProject.value;
newRow.cells[1].innerText=dltDepartment.value;
newRow.cells[2].innerText=dltMember.value;
newRow.cells[3].innerHTML='<input type="button" value="删除" onclick="this.parentNode.parentNode.removeNode(true)">';
newRow.click();}//编辑单元格
function EditTd(){
var src=window.event.srcElement;
if(src.tagName!="TD") return;
var strVal=src.innerText;
src.innerHTML='<input type="text" style="width:100%" onblur="EditEnd(this)" value="'+strVal+'">';
src.children[0].focus();
}//编辑结束,复原单元格
function EditEnd(src){
var strVal=src.value;
var objTd=src.parentElement;
objTd.innerHTML="";
objTd.innerText=strVal;
}var curRow=null;
function SelectRow(){
var clickrow=window.event.srcElement;
while(clickrow.tagName!="TR"){
clickrow=clickrow.parentElement;
}
//alert(clickrow.tagName);
if(curRow)
curRow.style.backgroundColor ="#FFFFFF";
clickrow.style.backgroundColor ="#0099FF";
curRow=clickrow;
btnUp.disabled=false;
btnDown.disabled=false;
}//移动行
function Move(flag){
var len=tbCondition.rows.length;
if(len==1){
alert("只有一行,无法移动!");
return;
}
else if(curRow.rowIndex==len-1 && flag==1){
alert("最后一行,无法下移!");
return;
}
else if(curRow.rowIndex==0 && flag==-1){
alert("第一行,无法上移!");
return;
}
else{
var chgRow=tbCondition.rows[curRow.rowIndex+flag];
for(var i=0;i<3;i++){
var strTd=curRow.cells[i].innerHTML;
curRow.cells[i].innerHTML=chgRow.cells[i].innerHTML;
chgRow.cells[i].innerHTML=strTd;
}
chgRow.click();
}
}
</script>
</head><body>
<table width="1022" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="387" height="140">
<select name="Project" size="10" id="dltProject" style="width:100% ">
<option value="Project1" selected>Project1</option>
<option value="Project2"> Project2</option>
<option value="Project3"> Project3</option>
</select></td>
<td width="435">
<select name="Department" id="dltDepartment" size="10" style="width:100% " >
<option value="1Group" selected>1Group</option>
<option value="2Group">2Group</option>
<option value="3Group">3Group</option>
<option value="4Group">4Group</option>
<option value="5Group">5Group</option>
</select></td>
<td width="192">
<select name="Member" id="dltMember" size="10" style="width:100% ">
<option value="a" selected>a</option>
<option value="s">s</option>
<option value="d">d</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="t">t</option>
</select></td>
</tr>
<tr>
<td height="30"><input name="btnAdd" type="button" value="添加" onClick="Add()"></td>
<td><input name="btnUp" type="button" value="上移" onClick="Move(-1)" disabled></td>
<td><input name="btnDown" type="button" value="下移" onClick="Move(1)" disabled></td>
</tr>
</table>
<br>
<table id="tbCondition" width="97%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="36%">Project1</td>
<td width="41%">1Group</td>
<td width="12%">a</td>
<td width="11%"><input type="button" value="删除" onclick="this.parentNode.parentNode.removeNode(true)"></td>
</tr>
</table>
</body>
</html>
要怎么实现啊很急~<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>选择项目组成员</title>
<link rel="stylesheet" type="text/css" href="bg.css" media="screen" /><script language="javascript">function Add(){
if(dltProject.selectedIndex==-1) {alert("请选择项目名称!");return;};
if(dltDepartment.selectedIndex==-1) {alert("请选择技术部门!");return;};
if(dltMember.selectedIndex==-1) {alert("请选择组员!");return;}; var newRowPos=tbCondition.rows.length;
if(curRow) newRowPos=curRow.rowIndex+1; var newRow=tbCondition.insertRow(newRowPos);
newRow.attachEvent("onclick",SelectRow); var newCell=newRow.insertCell();
newCell.attachEvent("onclick",EditTd); newCell=newRow.insertCell();
newCell.attachEvent("onclick",EditTd); newCell=newRow.insertCell();
newCell.attachEvent("onclick",EditTd); newRow.insertCell();
newRow.cells[0].innerText=dltProject.value;
newRow.cells[1].innerText=dltDepartment.value;
newRow.cells[2].innerText=dltMember.value;
newRow.cells[3].innerHTML='<input type="button" value="删除" onclick="this.parentNode.parentNode.removeNode(true)">';
newRow.click();}//编辑单元格
function EditTd(){
var src=window.event.srcElement;
if(src.tagName!="TD") return;
var strVal=src.innerText;
src.innerHTML='<input type="text" style="width:100%" onblur="EditEnd(this)" value="'+strVal+'">';
src.children[0].focus();
}//编辑结束,复原单元格
function EditEnd(src){
var strVal=src.value;
var objTd=src.parentElement;
objTd.innerHTML="";
objTd.innerText=strVal;
}var curRow=null;
function SelectRow(){
var clickrow=window.event.srcElement;
while(clickrow.tagName!="TR"){
clickrow=clickrow.parentElement;
}
//alert(clickrow.tagName);
if(curRow)
curRow.style.backgroundColor ="#FFFFFF";
clickrow.style.backgroundColor ="#0099FF";
curRow=clickrow;
btnUp.disabled=false;
btnDown.disabled=false;
}//移动行
function Move(flag){
var len=tbCondition.rows.length;
if(len==1){
alert("只有一行,无法移动!");
return;
}
else if(curRow.rowIndex==len-1 && flag==1){
alert("最后一行,无法下移!");
return;
}
else if(curRow.rowIndex==0 && flag==-1){
alert("第一行,无法上移!");
return;
}
else{
var chgRow=tbCondition.rows[curRow.rowIndex+flag];
for(var i=0;i<3;i++){
var strTd=curRow.cells[i].innerHTML;
curRow.cells[i].innerHTML=chgRow.cells[i].innerHTML;
chgRow.cells[i].innerHTML=strTd;
}
chgRow.click();
}
}
</script>
</head><body>
<table width="1022" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="387" height="140">
<select name="Project" size="10" id="dltProject" style="width:100% ">
<option value="Project1" selected>Project1</option>
<option value="Project2"> Project2</option>
<option value="Project3"> Project3</option>
</select></td>
<td width="435">
<select name="Department" id="dltDepartment" size="10" style="width:100% " >
<option value="1Group" selected>1Group</option>
<option value="2Group">2Group</option>
<option value="3Group">3Group</option>
<option value="4Group">4Group</option>
<option value="5Group">5Group</option>
</select></td>
<td width="192">
<select name="Member" id="dltMember" size="10" style="width:100% ">
<option value="a" selected>a</option>
<option value="s">s</option>
<option value="d">d</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="t">t</option>
</select></td>
</tr>
<tr>
<td height="30"><input name="btnAdd" type="button" value="添加" onClick="Add()"></td>
<td><input name="btnUp" type="button" value="上移" onClick="Move(-1)" disabled></td>
<td><input name="btnDown" type="button" value="下移" onClick="Move(1)" disabled></td>
</tr>
</table>
<br>
<table id="tbCondition" width="97%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="36%">Project1</td>
<td width="41%">1Group</td>
<td width="12%">a</td>
<td width="11%"><input type="button" value="删除" onclick="this.parentNode.parentNode.removeNode(true)"></td>
</tr>
</table>
</body>
</html>
根据 Department 当前选中 option 的不同
按照你自己的需求 去对 Member select 中的option 进行隐藏操作。具体代码网上应该有多少 google耐心的找一下总会有的
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>选择项目组成员 </title>
<link rel="stylesheet" type="text/css" href="bg.css" media="screen" /><script language=javascript>
function groupSelecter(myObject) {
var subSelect = document.getElementById("dltMember");
subSelect.options.length = 0;
switch (myObject.value) {
case "1Group":
subSelect.options.add(new Option("a", "a"));
subSelect.options.add(new Option("s", "s"));
subSelect.value = "a";
break;
case "2Group":
subSelect.options.add(new Option("f", "f"));
subSelect.options.add(new Option("g", "g"));
subSelect.value = "f";
break;
default:
subSelect.options.add(new Option("a", "a"));
subSelect.options.add(new Option("s", "s"));
subSelect.options.add(new Option("f", "f"));
subSelect.options.add(new Option("g", "g"));
subSelect.options.add(new Option("h", "g"));
subSelect.options.add(new Option("t", "t"));
subSelect.value = "a";
break;
}
}
</script>
</head>
<body onload="groupSelecter(document.getElementById('dltDepartment'));">
<table width="1022" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="435">
<select name="Department" id="dltDepartment" size="10" style="width: 100%" onchange="groupSelecter(this);">
<option value="1Group" selected>1Group </option>
<option value="2Group">2Group </option>
<option value="3Group">3Group </option>
<option value="4Group">4Group </option>
<option value="5Group">5Group </option>
</select>
</td>
<td width="192">
<select name="Member" id="dltMember" size="10" style="width: 100%">
</select>
</td>
</tr>
</table>
</body>
</html>