<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>demo</title>
<script src="jquery-1.4.4.min.js"></script>
<script>
$(function(){
//选择一项
$("#addOne").click(function(){
$("#from option:selected").clone().appendTo("#to");
$("#from option:selected").remove();
});
//选择全部
$("#addAll").click(function(){
$("#from option").clone().appendTo("#to");
$("#from option").remove();
});
//移除一项
$("#removeOne").click(function(){
$("#to option:selected").clone().appendTo("#from");
$("#to option:selected").remove();
});
//移除全部
$("#removeAll").click(function(){
$("#to option").clone().appendTo("#from");
$("#to option").remove();
});
//移至顶部
$("#Top").click(function(){
var allOpts = $("#to option");
var selected = $("#to option:selected");
if(selected.get(0).index!=0){
for(i=0;i<selected.length;i++){
var item = $(selected.get(i));
var top = $(allOpts.get(0));
item.insertBefore(top);
}
}
});
//上移一行
$("#Up").click(function(){
var selected = $("#to option:selected");
if(selected.get(0).index!=0){
selected.each(function(){
$(this).prev().before($(this));
});
}
});
//下移一行
$("#Down").click(function(){
var allOpts = $("#to option");
var selected = $("#to option:selected");
if(selected.get(selected.length-1).index!=allOpts.length-1){
for(i=selected.length-1;i>=0;i--){
var item = $(selected.get(i));
item.insertAfter(item.next());
}
}
});
//移至底部
$("#Buttom").click(function(){
var allOpts = $("#to option");
var selected = $("#to option:selected");
if(selected.get(selected.length-1).index!=allOpts.length-1){
for(i=selected.length-1;i>=0;i--){
var item = $(selected.get(i));
var buttom = $(allOpts.get(length-1));
item.insertAfter(buttom);
}
}
});
});
</script>
</head>
<body>
<table align="center" width="288" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<select name="from" id="from" multiple="multiple" size="10" style="width:100%">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
</td>
<td align="center">
<input type="button" id="addAll" value=" >> " style="width:50px;" /><br />
<input type="button" id="addOne" value=" > " style="width:50px;" /><br />
<input type="button" id="removeOne" value="<" style="width:50px;" /><br />
<input type="button" id="removeAll" value="<<" style="width:50px;" /><br />
</td>
<td colspan="4">
<select name="to" id="to" multiple="multiple" size="10" style="width:100%">
</select>
</td>
<td align="center">
<input type="button" id="Top" value="置顶" style="width:50px;" /><br />
<input type="button" id="Up" value="上移" style="width:50px;" /><br />
<input type="button" id="Down" value="下移" style="width:50px;" /><br />
<input type="button" id="Buttom" value="置底" style="width:50px;" /><br />
</td>
</tr>
</table>
</body>
</html>
实现效果如下图：
写完了才发现有插件~
附上插件官网地址（multiselect2side plugin）：http://www.senamion.com/blog/jmultiselect2side.html
分享到：
相关推荐
- **初始化插件**：在DOM加载完成后，使用jQuery选择器找到对应的`<select>`元素，并调用`.multiselect()`方法进行初始化。 ```javascript $(document).ready(function() { $("#example").multiselect(); }); ``` ...
在实际项目中，`jquery_multiselect` 可广泛应用于需要用户进行多选操作的场景，如设置权限、选择兴趣爱好、选择城市等。 总结，`jquery_multiselect` 是一款强大的 jQuery 多选下拉框插件，它提供了丰富的功能和...
- 自定义样式：通过修改`jquery.multiselect.filter.css`，可以自定义筛选框的外观，适应不同的设计需求。 - 键盘导航：用户可以通过键盘的上下键在筛选后的选项中进行选择，增强交互性。 - 多语言支持：插件允许...
jQuery multiSelect是一款优秀的插件，专门用于创建美观且易用的下拉多选框。本文将深入探讨该插件的使用方法、核心特性以及如何在实际项目中进行集成。 首先，jQuery multiSelect插件的核心功能是为传统的...
JQuery Multiselect是一款基于jQuery库的插件，...在实际应用中，Jquery Multiselect能很好地应用于需要用户选择多个项目的场景，如过滤、搜索或数据输入。通过合理的配置和定制，它可以成为提升用户体验的强大工具。
Jquery MultiSelect不错的左右选择的选择框 值得学习
- **全选/取消全选**：jQuery UI Multiselect 提供了一个便捷的全选按钮，允许用户一键选择所有选项，同时也能够快速取消所有选择。 - **分组和筛选**：通过自定义的HTML结构，可以实现选项的分组展示，同时提供搜索...
总的来说，jQuery Multiselect插件是提升网页多选功能用户体验的理想选择。它不仅提供了丰富的功能，而且易于集成和扩展，让开发者能够更加专注于业务逻辑，而不是繁琐的UI实现。通过深入理解和熟练使用这个插件，...
然后，我们使用jQuery选择器和`.multiselect()`方法将其转化为Multiselect组件。 获取选中的值是Multiselect插件的一个重要功能。你可以通过调用`.multiselect('getChecked')`或`.multiselect('getSelected')`方法...
为了解决这一问题，开发者们引入了jQuery插件——jQuery Multiselect Filter，它不仅提供了多选功能，还内置了搜索过滤功能，极大地提升了用户在选择项时的效率。 jQuery Multiselect Filter插件是基于jQuery库的，...
1. **美化界面**：jQuery MultiSelect 使用自定义的CSS样式，使得多选框不再单调，可以轻松地与网站的其他元素保持视觉一致性。 2. **多选支持**：用户可以同时选择多个选项，这在处理复杂数据或需要批量操作时非常...
jQuery Multiselect是一款基于jQuery UI库的插件，用于创建功能丰富的多选下拉列表。这款插件提供了多种特性，使得在网页中实现复杂的下拉列表交互变得更加便捷。以下是对jQuery Multiselect功能的详细介绍： 1. **...
本项目"基于zTree-MultiSelect实现的左右选择框Demo"是针对zTree进行的一个功能扩展，旨在提供多选和左右移动功能，以满足更复杂的用户交互需求。 zTree的核心功能是将层级结构的数据转换为树形结构显示，其强大的...
在实际应用中，我们还可以利用jQuery.multiSelect的API来进行动态操作，例如添加、删除选项或清空选择： ```javascript // 添加选项 $("#example").multiSelect('add', {value: '3', text: 'Option 3'}); // 删除...
3. `jquery.multiselect.js` 和 `jquery.multiselect.min.js`：这是jQuery MultiSelect插件的核心JavaScript文件，它们包含了实现多选框增强功能的代码。未压缩版本便于调试，而压缩版本则用于生产环境以减少加载...
3. 使用jQuery选择器找到`<select>`元素，然后调用`.multiSelect()`方法，初始化插件。 例如： ```html 选项1 选项2 ... $(document).ready(function() { $('#mySelect').multiSelect(); }); ``` 通过以上...
使用jQuery选择器找到这个`<select>`元素，并调用`multiSelect()`方法初始化插件。 ```javascript $(document).ready(function() { $("select").multiSelect(); }); ``` 四、配置与自定义 multiSelect提供了...
在Web开发中，选择框是我们经常会遇到的一种元素，尤其在处理多选场景时，一个简洁、易用的多选插件能够大大提高用户体验。`jQuery MultiSelect`就是这样一款插件，它基于jQuery库，提供了美观且功能丰富的多选...
《jQuery下的多选下拉框：multiSelect插件详解》 在Web开发中，我们经常需要处理用户的选择操作，特别是当需要用户提供多个选项时，传统的HTML `<select>` 标签往往不能满足需求。这时，jQuery的插件multiSelect就...