<html>
<head></head>
<BODY>
<script language="JavaScript">
function copyToList(from,to)
//from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字
//你可以根据你的具体情况修改
{
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp'){
toList.options.length = 0;
}
var sel = false;
for (i=0;i<fromList.options.length;i++){
var current = fromList.options[i];
if (current.selected){
sel = true;
if (current.value == 'temp'){
alert ('你不能选择这个项目!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length] = new Option(txt,val);
fromList.options[i] = null;
i--;
}
}
}
//这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序//能取得相关数据
function allSelect(){
List = document.forms[0].chosen;
if (List.length && List.options[0].value == 'temp') return;
for (i=0;i<List.length;i++){
List.options[i].selected = true;
}
}
function copyAll(from,to){
var fromList = eval('document.forms[0].' + from);
var toList = eval('document.forms[0].' + to);
if (toList.options.length > 0 && toList.options[0].value == 'temp'){
toList.options.length = 0;
}
for (i=0;i<fromList.options.length;i++){
var current = fromList.options[i];
toList.options[toList.length] = new Option(current.text,current.value);
fromList.options[i] = null;
i--;
}
}
</script>
<table border="0"> <form onSubmit="allSelect()">
<tr>
<td>
<select name="possible" size="4" MULTIPLE width=200 style="width: 200px">
<option value="1">中国广州
<option value="2">中国上海
<option value="3">中国北京
<option value="4">中国武汉
</select>
</td>
<td><a href="javascript:copyToList('possible','chosen')"></a>
<br>
<br>
<a href="javascript:copyAll('possible','chosen')"></a>
<br><br>
</a><a href="javascript:copyToList('chosen','possible')">/a> <br><br>
<a href="javascript:copyAll('chosen','possible')"></a>
<br>
</td>
<td>
<select name="chosen" size="4" MULTIPLE width=200 style="width: 200px;">
<option value="temp">从左边选择你的地区
</select>
</td>
</tr>
</form>
</table>
</BODY>
</html>
分享到：
相关推荐
在这个特定的场景中，我们关注的是Element-UI中的选择器组件——`<el-select>`，特别是如何实现多选下拉框的全选功能。在实际应用中，全选功能常用于批量操作，如用户一次性勾选多个选项进行批量删除、导出等操作。 ...
为了实现全选和全不选功能，我们需要添加额外的按钮和JavaScript代码。按钮可以是Bootstrap的`<button>`或`<input type="checkbox">`，并在点击时触发相应的事件处理函数。这里我们使用`<input type="checkbox">`...
这通常通过将`<select>`元素替换为一组`<input type="checkbox">`和相应的`<label>`元素来实现，同时借助CSS和JavaScript进行样式和行为的定制。 **三、全选功能** 全选功能使得用户可以一键选择所有选项，这对于...
实现ASP.NET中的多选按钮全选功能，可以通过服务器端逻辑或客户端JavaScript来完成。服务器端方法适用于需要在后端处理数据变化的情况，而客户端方法则提供了更好的用户体验和即时反馈。在实际应用中，选择哪种方法...
而"jQuery Multiple Select"则是jQuery的一个插件，专门用于实现下拉框的多选功能，使得用户可以在下拉菜单中选择多个选项，极大地提高了交互体验。这个插件在各种需要用户进行多项选择的场景中十分实用，例如设置...
在本文中，我们将深入探讨如何使用AngularJS实现一个功能完备的复选框（checkbox）系统，包括多选、全选和反选功能。这个系统的一个关键特性是它完全基于AngularJS，无需依赖其他源数据，因此可以确保原始数据的完整...
此外，为了实现全选/取消全选的功能，可以在`el-select`组件上添加一个`@change`事件监听器，当选择项发生变化时触发`toggleAllChecked`方法： ```html <el-select v-model="value" multiple placeholder="请...
然后，你可以添加一个新的主复选框或者绑定`invertSelection()`到已有的全选复选框的`click`事件，以实现反选功能。 在实际开发中，你可能还需要考虑更多细节，例如复选框的动态添加和删除、异步加载等。你也可以...
下面将详细讲解如何通过JavaScript（JS）、WXML（微信小程序的XML标记语言）和WXSS（微信小程序的CSS样式语言）来实现这一功能。 首先，我们来看JS部分。在这个例子中，`Page` 是微信小程序的基本页面结构，包含了...
在HTML中，创建一个可多选的下拉框通常涉及到`<select>`元素与`<option>`元素的组合，但为了实现多选功能，我们需要使用`<input type="checkbox">`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...
总之，通过结合EasyUI的Combobox组件和自定义的JavaScript代码，我们可以轻松实现多选模式下的“选择全部”功能，为用户提供更便捷的操作体验。在开发过程中，理解并熟练运用此类组件和技巧，对于提升Web应用的用户...
在JavaScript编程中，全选和反选功能是常见的交互元素，尤其在表格或者多选列表中，用户往往希望一键选择或取消所有选项。本话题将深入探讨如何利用JavaScript实现这样的功能，以提升用户体验。 首先，我们需要理解...
以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在JavaScript中，可以通过获取全选按钮的`checked`属性来控制所有复选框的...
在本例中，我们关注的是如何利用JavaScript处理复选框的全选、多选、全不选以及反选操作。复选框是HTML表单元素之一，允许用户在多个选项中进行多选。 首先，我们需要创建一个包含多个复选框的HTML结构。例如： ``...
这个组件基于jQuery库和zTree插件，使得在网页应用中能够方便地创建具有下拉树效果的输入控件，用户可以方便地从树形结构中选择多项内容。 ### jQuery Combotree 的主要特性： 1. **Bootstrap 风格**：这个组件...
总之，复选框的全选和反选功能是UI交互设计中的基础元素，它在数据管理、用户选择和批量操作等场景中起到关键作用。理解和熟练运用这一功能，可以提升应用的易用性和效率。在实际开发中，我们需要根据具体的技术栈和...
本教程将深入探讨如何使用jQuery实现全选和反选功能，这在多选列表或表格中非常常见，例如在批量处理数据时。 全选和反选功能的核心在于同步用户界面中的复选框状态。当用户点击一个主复选框（通常标记为“全选”）...
当前主流的方法是使用 JavaScript 实现 CheckBox 的多选和反选。下面笔者将为大家介绍如何实现这种网页效果。 首先，在网页中设置一个表单，即 `<form>`。然后，把所有的选项放入表单里面去。多选和全选的 CheckBox...
在JavaScript编程中，"js实现多选多列选择"是一个常见的需求，特别是在构建交互式的Web应用时。这种功能常用于创建复杂的选择器，比如多选的下拉框或者表格，可以提升用户界面的效率和用户体验。下面将详细介绍如何...