<select>控件的关联
用<select></select>构造了两个列表,他们之间有两个按钮,当点击第一个按钮时,select1的内容全部移动到select2中,当点击第二个按钮时,select2的内容全部移动到select1中,如何实现最好呢?另外,如何判断列表项目有没有被选中??请赐教! 问题点数：20、回复次数：2Top
1 楼net_lover（【孟子E章】）回复于 2001-05-22 11:30:00 得分 0
<html>
<head>
<script language="JavaScript">
<!--
function addSrcToDestList() {
destList = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {
var found = false;
for(var count = 0; count < len; count++) {
if (destList.options[count] != null) {
if (srcList.options[i].text == destList.options[count].text) {
found = true;
break;
}
}
}
if (found != true) {
destList.options[len] = new Option(srcList.options[i].text);
len++;
}
}
}
}
function deleteFromDestList() {
var destList = window.document.forms[0].destList;
var len = destList.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList.options[i] != null) && (destList.options[i].selected == true)) {
destList.options[i] = null;
}
}
}
// -->
</SCRIPT>
</head>
<body>
<center>
<form method="POST">
<table bgcolor="#FFFFCC">
<tr>
<td bgcolor="#FFFFCC" width="74">Available</td>
<td bgcolor="#FFFFCC"> </td>
<td bgcolor="#FFFFCC" width="69">Selected</td>
</tr>
<tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center">
<input type="button" value=" >> " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" << " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
<tr>
<td colspan=3 align="center">
<input type="button" value="Done" onClick = "javascript:addSelectedItemsToParent()">
</td>
</tr>
</table>
</form>
</body>
</html>Top
2 楼net_lover（【孟子E章】）回复于 2001-05-22 11:33:00 得分 20
<html>
<head>
<script language="JavaScript">
<!--
function addSrcToDestList() {
destList = window.document.forms[0].destList;
srcList = window.document.forms[0].srcList;
var len = destList.length;
for(var i = 0; i < srcList.length; i++) {
if ((srcList.options[i] != null) && (srcList.options[i].selected)) {
var found = false;
for(var count = 0; count < len; count++) {
if (destList.options[count] != null) {
if (srcList.options[i].text == destList.options[count].text) {
found = true;
break;
}
}
}
if (found != true) {
destList.options[len] = new Option(srcList.options[i].text);
len++;
}
}
}
}
function deleteFromDestList() {
var destList = window.document.forms[0].destList;
var len = destList.options.length;
for(var i = (len-1); i >= 0; i--) {
if ((destList.options[i] != null) && (destList.options[i].selected == true)) {
destList.options[i] = null;
}
}
}
// -->
</SCRIPT>
</head>
<body>
<center>
<form method="POST">
<table bgcolor="#FFFFCC">
<tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center">
<input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>Top
