<!-- 把如下代码加入<body>区域中 -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
sortitems = 1; // Automatically sort items within lists? (1 or 0)
function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
if (sortitems) SortD(tbox);
}
function moveall(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
if (sortitems) SortD(tbox);
}
function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=i; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
}
var ln = i;
break;
}
}
if(ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
}
}
function SortD(box) {
var temp_opts = new Array();
var temp = new Object();
for(var i=0; i<box.options.length; i++) {
temp_opts[i] = box.options[i];
}
for(var x=0; x<temp_opts.length-1; x++) {
for(var y=(x+1); y<temp_opts.length; y++) {
if(temp_opts[x].text > temp_opts[y].text) {
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
}
}
}
for(var i=0; i<box.options.length; i++) {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
// End -->
</script>
<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="5" name="list1" style="width:250px">
<option value="11"> item 1.1 </option>
<option value="12"> item 1.2 </option>
<option value="13"> item 1.3 </option>
</select></td>
<td>
<input type="button" value=" > " onclick="move(this.form.list1,this.form.list2)" name="B1">
<input type="button" value=" < " onclick="move(this.form.list2,this.form.list1)" name="B2">
<input type="button" value=" >> " onclick="moveall(this.form.list1,this.form.list2)" name="B3">
<input type="button" value=" << " onclick="moveall(this.form.list2,this.form.list1)" name="B4">
</td>
<td><select multiple size="5" name="list2" style="width:250px">
<option value="21"> item 2.1 </option>
<option value="22"> item 2.2 </option>
<option value="23"> item 2.3 </option>
</select></td>
</tr>
</table>
</form>
转自http://www.jb51.net/article/12497.htm 在这里推荐使用jqueryUI的multiselect这个小插件
相关推荐
由于项目中用到左右选择的控件，网上找了一些相关的实现，基本上有两个： 1、基于JQuery UI的控件： 这个看起来样式不错，而且使用起来功能也比较齐全，但是与传统的左边选择到右边的方式不同，有点别扭。...
Bootstrap Multiselect是一款基于jQuery的插件，用于在Bootstrap框架中实现多选下拉菜单功能，提供了丰富的交互式选择器，包括左右选择等特性。这款插件极大地提升了用户在网页上进行选择操作的体验，尤其适合那些...
"multiselect 左右多选精简例子"是一个专为简化多选操作而设计的示例，它去除了不必要的代码，使得JavaScript（JS）部分更加精炼，易于理解和运行。这个例子可能是为了帮助开发者快速掌握如何实现左右两部分多选框...
"multiselect2side.js" 是一个专门用于实现左右选择并交换内容的JavaScript库，它为用户提供了直观且高效的选择方式，广泛应用于诸如数据过滤、用户权限分配、多选项选择等场景。这个库包含了JavaScript代码、CSS...
本项目"基于zTree-MultiSelect实现的左右选择框Demo"是针对zTree进行的一个功能扩展，旨在提供多选和左右移动功能，以满足更复杂的用户交互需求。 zTree的核心功能是将层级结构的数据转换为树形结构显示，其强大的...
Bootstrap 左右多选多Multiselect插件是一种基于流行的前端框架Bootstrap开发的组件，它极大地扩展了Bootstrap原生的下拉选择框功能。这个插件允许用户在两个独立的列表之间进行选择，使得多选操作更加直观和高效，...
"multiselect-master.zip" 是一个包含左右移动多选框插件源代码的压缩包，它提供了用户交互式的多选功能，常用于网页开发中。在解压后，我们需要关注两个核心文件 "multiselect.min.js" 和 "multiselect.js"，它们是...
"Multiselect"是一种基于jQuery实现的双列多选列表框控件，它提供了方便的左右移动功能，使得用户能够轻松地在两个列表之间选择和移除选项。本文将深入探讨Multiselect的实现原理和核心知识点，帮助开发者理解和应用...
`Multiselect2Side`是一款基于jQuery的插件，它提供了一种创新的用户体验，将多选框分为左右两部分，用户可以在左侧列表中选择项目，然后将这些项目移动到右侧，或者从右侧列表移除，以实现双向选择的功能。...
"左右移动下拉框插件Multiselect"是一种用于网页交互设计的工具，它允许用户在两个下拉框之间通过拖动或点击按钮来选择和移动选项，常用于多选场景，如筛选、分类等。这个插件提高了用户体验，使得用户在处理大量可...
Jquery MultiSelect不错的左右选择的选择框 值得学习
在原始版本中，用户可以左右移动选项，同时保持两个列表之间的选项同步。为了增强它的功能，我们可以考虑以下几个方面： 1. **自定义样式**：根据项目需求，我们可能需要修改默认的 CSS 样式，比如改变边框、颜色、...
用户可以在左右两侧之间轻松切换和选择，使得操作更加直观。 #### 3.2 双向同步 当选项在任一侧被选择或取消时，另一侧会实时更新，保持两边的数据同步。 #### 3.3 自定义样式 插件允许开发者通过CSS来调整选框...
在HTML部分，我们会有两个主要的列表元素，如`<ul>`或`<select>`，分别代表左右两个列表。每个列表项是`<li>`或`<option>`，并且可能带有可选的标识属性，如`data-id`，用于关联数据。 CSS则用于美化这些元素，例如...
这种选择器的一个典型实现是基于Bootstrap框架和jQuery库的扩展插件，如“基于bootstrap的jQuery左右移动多选框插件 multiselect”。 Bootstrap是一个流行的开源前端框架，它提供了丰富的预定义样式、组件和...
在描述中提到的“左右框进行移动”可能是指在两个独立的 Bootstrap Multiselect 下拉菜单中，用户可以选择将选项从一个菜单移到另一个，这种功能在权限管理或者部门分配时非常实用。实现这一功能可能需要结合 ...
在IT行业中，多选下拉框是一种常见的交互...而“Multiselect左右移动多选框”则在这一基础上增加了更具特色的操作方式，提升了用户体验。了解并熟练运用这类组件，对提升Web应用的用户体验和开发效率有着积极的意义。
本文将深入探讨如何使用jQuery实现一个功能丰富的下拉多选组件，包括左右选择和移除功能。 首先，`jQuery multiselect` 是一种常见的实现下拉多选的解决方案。它允许用户在下拉框中选择多个选项，同时提供了自定义...
在实现左右列表框数据传递的场景中，我们通常会涉及以下几个关键步骤： 1. **初始化列表框**：首先，你需要在程序启动时加载左侧列表框的数据。这可以通过设置LISTBOX的Items属性或使用AddItem方法动态添加数据。...