所以我有6行多列表字段。当用户选择一个值并单击"添加"时，该值将移动到"添加"列表，并从"删除"列表中删除。
然而，考虑到所有行都有相同的值，如果用户从第1行的"添加"框中选择一个值，我希望它也从第2、3、4、5、6行的"增加"框中删除。
这很难解释，所以，给你：
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
</script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add2').click(function() {
return !$('#select3 option:selected').remove().appendTo('#select4');
});
$('#remove2').click(function() {
return !$('#select4 option:selected').remove().appendTo('#select3');
});
});
</script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add3').click(function() {
return !$('#select5 option:selected').remove().appendTo('#select6');
});
$('#remove3').click(function() {
return !$('#select6 option:selected').remove().appendTo('#select5');
});
});
</script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add4').click(function() {
return !$('#select7 option:selected').remove().appendTo('#select8');
});
$('#remove3').click(function() {
return !$('#select8 option:selected').remove().appendTo('#select7');
});
});
</script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add5').click(function() {
return !$('#select9 option:selected').remove().appendTo('#select10');
});
$('#remove5').click(function() {
return !$('#select9 option:selected').remove().appendTo('#select10');
});
});
</script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#add6').click(function() {
return !$('#select11 option:selected').remove().appendTo('#select12');
});
$('#remove6').click(function() {
return !$('#select12 option:selected').remove().appendTo('#select11');
});
});
</script> <div align="center"><strong><span class="calloutForm">OVERTIME CONTACT <br />
DISPOSITION<br />
<br />
</span></strong></div>
<div class="calloutForm">
<div align="center">
<table width="495">
<tr>
<td width="122" rowspan="2"><strong>N/A - No Answer</strong></td>
<td width="139"><div align="right">
<select name="select1" multiple class="calloutForm" id="select1" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
<td width="138" rowspan="2"><div align="center">>>></div></td>
<td width="181"><div align="left">
<select name="select2" multiple class="calloutForm" id="select2">
</select>
</div></td>
</tr>
<tr>
<td><div align="right"><a href="#" id="add">add >></a></div></td>
<td><div align="left"><a href="#" id="remove"><< remove</a></div></td>
</tr>
</table>
</div>
<br />
</div>
<div></div>
<div class="calloutForm">
<div align="center">
<table width="495">
<tr>
<td width="122" rowspan="2"><strong>W - Working</strong></td>
<td width="139"><div align="right">
<select name="select3" multiple="multiple" class="calloutForm" id="select3" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
<td width="138" rowspan="2"><div align="center">>>></div></td>
<td width="181"><div align="left">
<select name="select3" multiple="multiple" class="calloutForm" id="select4">
</select>
</div></td>
</tr>
<tr>
<td><div align="right"><a href="#" id="add2">add >></a></div></td>
<td><div align="left"><a href="#" id="remove2"><< remove</a></div></td>
</tr>
</table>
<br />
</div>
</div>
<div class="calloutForm">
<div align="center">
<table width="495">
<tr>
<td width="122" rowspan="2"><strong>R - Refused</strong></td>
<td width="139"><div align="right">
<select name="select5" multiple="multiple" class="calloutForm" id="select5" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
<td width="138" rowspan="2"><div align="center">>>></div></td>
<td width="181"><div align="left">
<select name="select6" multiple="multiple" class="calloutForm" id="select6">
</select>
</div></td>
</tr>
<tr>
<td><div align="right"><a href="#" id="add3">add >></a></div></td>
<td><div align="left"><a href="#" id="remove3"><< remove</a></div></td>
</tr>
</table>
<br />
</div>
</div>
<div class="calloutForm">
<div align="center">
<table width="495">
<tr>
<td width="122" rowspan="2"><strong>S - School<br />
MTFD Approved Only
</strong></td>
<td width="139"><div align="right">
<select name="select7" multiple="multiple" class="calloutForm" id="select7" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
<td width="138" rowspan="2"><div align="center">>>></div></td>
<td width="181"><div align="left">
<select name="select8" multiple="multiple" class="calloutForm" id="select8">
</select>
</div></td>
</tr>
<tr>
<td><div align="right"><a href="#" id="add4">add >></a></div></td>
<td><div align="left"><a href="#" id="remove4"><< remove</a></div></td>
</tr>
</table>
<br />
</div>
</div>
<div class="calloutForm">
<div align="center">
<table width="495">
<tr>
<td width="122" rowspan="2"><strong>Acc - Accepted</strong></td>
<td width="139"><div align="right">
<select name="select9" multiple="multiple" class="calloutForm" id="select9" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
<td width="138" rowspan="2"><div align="center">>>></div></td>
<td width="181"><div align="left">
<select name="select10" multiple="multiple" class="calloutForm" id="select10">
</select>
</div></td>
</tr>
<tr>
<td><div align="right"><a href="#" id="add5">add >></a></div></td>
<td><div align="left"><a href="#" id="remove5"><< remove</a></div></td>
</tr>
</table>
<br />
</div>
</div>
<div class="calloutForm">
<div align="center">
<table width="495">
<tr>
<td width="122" rowspan="2"><strong>DNC - Did Not Call</strong></td>
<td width="139"><div align="right">
<select name="select11" multiple="multiple" class="calloutForm" id="select11" title="<?php echo $row_allUsers['submittername']; ?>">
<?php
do {
?>
<option value="<?php echo $row_allUsersDynamicList['submittername']?>"><?php echo $row_allUsersDynamicList['submittername']?></option>
<?php
} while ($row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList));
$rows = mysql_num_rows($allUsersDynamicList);
if($rows > 0) {
mysql_data_seek($allUsersDynamicList, 0);
$row_allUsersDynamicList = mysql_fetch_assoc($allUsersDynamicList);
}
?>
</select>
</div></td>
<td width="138" rowspan="2"><div align="center">>>></div></td>
<td width="181"><div align="left">
<select name="select12" multiple="multiple" class="calloutForm" id="select12">
</select>您应该考虑以更动态的方式编写代码。与其为每个"Add"answers"Remove"链接编写单独的事件处理程序，不如在页面类中指定元素，并在类级别通用地处理逻辑。
例如，我建议将左侧的select设为"源"类，将右侧的select设为"目的地"类。给类"添加"answers"删除"到您的添加/删除链接。要保留排序，只需在文档就绪时存储一个排序索引，每次重新填充源时，都会根据存储的索引进行排序。
我创建了事件处理程序以及排序保存/恢复代码。
$(function() {
//store a sort index for each option item
$(".source").each(function() {
$(this).find("option").each(function(index) {
$(this).data("sortIndex", index);
});
});
$(".add").on("click", function(e) {
e.preventDefault();
var that = $(this);
var destination = that.closest(".calloutForm").find(".destination");
var options = that.closest(".calloutForm").find(".source").find("option:selected");
//move selected options
options.detach().appendTo(destination);
//remove from other sources
$(".source").find("option").filter(function(index, element) {
return options.filter('[value="' + element.value + '"]').length;
}).remove();
});
$(".remove").on("click", function(e) {
e.preventDefault();
//remove from current destination and append to all sources
$(this).closest(".calloutForm").find(".destination").find("option:selected").detach().appendTo(".source");
//sort options by stored index
$(".source").each(function() {
var options = $(this).find("option").detach();
$(this).append(options.toArray().sort(function(a, b) {
return $(a).data("sortIndex") > $(b).data("sortIndex");
}));
});
});
});
您可以在下面的代码段中看到一个完整的运行示例。
$(function() {
//store a sort index for each option item
$(".source").each(function() {
$(this).find("option").each(function(index) {
$(this).data("sortIndex", index);
});
});
$(".add").on("click", function(e) {
e.preventDefault();
var that = $(this);
var destination = that.closest(".calloutForm").find(".destination");
var options = that.closest(".calloutForm").find(".source").find("option:selected");
//move selected options
options.detach().appendTo(destination);
//remove from other sources
$(".source").find("option").filter(function(index, element) {
return options.filter('[value="' + element.value + '"]').length;
}).remove();
});
$(".remove").on("click", function(e) {
e.preventDefault();
//remove from current destination and append to all sources
$(this).closest(".calloutForm").find(".destination").find("option:selected").detach().appendTo(".source");
//sort options by stored index
$(".source").each(function() {
var options = $(this).find("option").detach();
$(this).append(options.toArray().sort(function(a, b) {
return $(a).data("sortIndex") > $(b).data("sortIndex");
}));
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="calloutForm">
<tr>
<td>N/A - No Answer</td>
<td>
<select multiple class="source">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
<option value="Option5">Option5</option>
</select>
</td>
<td>
>>>
</td>
<td>
<select multiple class="destination">
</select>
</td>
</tr>
<tr>
<td>
<a href="" class="add">add >></a>
</td>
<td>
<a href="" class="remove">remove <<</a>
</td>
</tr>
</table>
<table class="calloutForm">
<tr>
<td>W - Working</td>
<td>
<select multiple class="source">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
<option value="Option5">Option5</option>
</select>
</td>
<td>
>>>
</td>
<td>
<select multiple class="destination">
</select>
</td>
</tr>
<tr>
<td>
<a href="" class="add">add >></a>
</td>
<td>
<a href="" class="remove">remove <<</a>
</td>
</tr>
</table>
<table class="calloutForm">
<tr>
<td>R - Refused</td>
<td>
<select multiple class="source">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
<option value="Option5">Option5</option>
</select>
</td>
<td>
>>>
</td>
<td>
<select multiple class="destination">
</select>
</td>
</tr>
<tr>
<td>
<a href="" class="add">add >></a>
</td>
<td>
<a href="" class="remove">remove <<</a>
</td>
</tr>
</table>
<table class="calloutForm">
<tr>
<td>S - School MTFD Approved Only</td>
<td>
<select multiple class="source">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
<option value="Option5">Option5</option>
</select>
</td>
<td>
>>>
</td>
<td>
<select multiple class="destination">
</select>
</td>
</tr>
<tr>
<td>
<a href="" class="add">add >></a>
</td>
<td>
<a href="" class="remove">remove <<</a>
</td>
</tr>
</table>
<table class="calloutForm">
<tr>
<td>Acc - Accepted</td>
<td>
<select multiple class="source">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
<option value="Option5">Option5</option>
</select>
</td>
<td>
>>>
</td>
<td>
<select multiple class="destination">
</select>
</td>
</tr>
<tr>
<td>
<a href="" class="add">add >></a>
</td>
<td>
<a href="" class="remove">remove <<</a>
</td>
</tr>
</table>
<table class="calloutForm">
<tr>
<td>DNC - Did Not Call</td>
<td>
<select multiple class="source">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
<option value="Option5">Option5</option>
</select>
</td>
<td>
>>>
</td>
<td>
<select multiple class="destination">
</select>
</td>
</tr>
<tr>
<td>
<a href="" class="add">add >></a>
</td>
<td>
<a href="" class="remove">remove <<</a>
</td>
</tr>
</table>