删除'添加“;列表中的值
Remove 'Added" Values from List
所以我有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>
相关文章:
- 在Javascript中使用JQueryMobile向列表添加项目
- 角度 - 需要向选择下拉列表添加多个占位符
- Javascript:如何为列表添加价值并使其即时更新
- 如何为我的嵌入YouTube播放列表添加Facebook共享按钮
- 如何允许用户将播放列表添加到单个 YT 帐户
- 将值列表添加到值本身,不包括其自身的值
- 将多个英国邮政编码列表添加到谷歌地图
- 如何使用 JavaScript 将下拉列表添加到<跨度>
- 下划线模板,将列表添加到单个数组中
- 如何将地址列表添加到地图一侧
- 可以通过Javascript将选择下拉列表添加到我的winJS工具栏中吗?
- 如何将选择列表添加到自定义实体的案例表单中(注意:替换普通查找字段)
- 使用下拉列表添加/删除搜索框
- 如何使用zip.js将图像文件列表添加到zip文件中
- 如何在jQuery中向不同的下拉列表添加不同的前缀
- 如何在单击时以编程方式将网页列表添加到浏览器收藏夹中
- 单击按钮将下拉列表添加到新行
- 为每个从特定数字开始的x列表添加边框
- 在使用javascript向下拉列表添加项目并运行服务器端代码后,无效的回发或回调参数
- 选择Jplayer播放列表添加复选框