<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>
分享到：
相关推荐
jQuery下拉复选菜单，可实现多选全选功能，并提供下拉框内实时搜索
jQuery Multiple Select实现下拉框多选，请注意是Multiple 。实例介绍详细，想用的可以直接Copy进去用
本文实例讲述了微信小程序实现多选框全选与取消全选功能。分享给大家供大家参考，具体如下： js部分： page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",...
bootstrap风格的多选下拉树，基于jquery、ztree，混点下载积分
实际就是将element三种官方select实例整合起来，同时实现分组+多选+可搜索，此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考 准备工作： 除了vue脚手架、element等必要包之外。该项目还用到了...
Vue.js 再封装elSelect，实现多选，全选，反选，失去焦点并隐藏；点击空白处会自动收起下拉菜单
前端select下拉框带搜索,多选,反选
React多选组件 React多选组件 安装： npm install --save @khanacademy/react-multi-select yarn add @khanacademy/react-multi-select 用法： 有关如何使用该组件的信息，请参见/src/stories/index.js的示例，但...
SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁，支持下拉，分页，键盘操作等功能。它的特点还有：插件基于jQuery开发，可在Bootstrap2、3环境下使用，亦可在原生无UI...
虽然这些框架可以实现很多功能，但因为在实际项目中，可能只会用到其中的某个功能，若是一概引入，会导致整个js加载过于笨重。比如前面提到的bootstrap-select插件，在不压缩的情况下，达到300多k。因此，为了实现一...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]js核心代码 代码如下:/*移除左边选中的列表项到右边*/ function fMoveSelectedOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!...
//LayUI扩展组件之treeselect.js by:Van 这是一个基于ztree.js和layui扩展的树形下拉多选组件
9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现...
9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现...
示例之全选和反选以及取消 javascript必须加分号 示例之后台管理左侧菜单 今日内容梳理 本周作业 第16周 上节作业问题答疑 今日内容计划 CSS内容补充以及后台管理页面布局 后台管理页面布局 JavaScript内容回顾 ...
jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。
替换和改进您的 HTML带样式且不带 jQuery 的字段！ tail.select 脚本回来了，用普通...为您的 Web 应用程序添加搜索栏、多选实用程序（例如全选或不选按钮）、单选字段的可取消选择、完美的设计和更多用户友好的功能。
有一个多选的需求，在网上找到了这个插件：... 所以使用它的时候，先得导入jquery-ui相关的js和css哦 特性 •支持点击label实现checkbox组选择. •头部选项，如全选/ 取消全选 /关闭功能. •支持键盘选择. •支
2.6. 更进一步，自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了，请允许我让2.0先上场。 2.6.3. 1.x时代的全选checkbox。 2.7. 分页了吗？分页了吗？如果还没分就看这里吧。 2.7.1. 表面...
2.6. 更进一步，自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了，请允许我让2.0先上场。 2.6.3. 1.x时代的全选checkbox。 2.7. 分页了吗？分页了吗？如果还没分就看这里吧。 2.7.1. 表面工作...