扫描二维码用手机看文章MultiSelect左右选择控件的设计与实现介绍
字体：[ ] 类型：转载 时间：
由于项目中用到左右选择的控件，网上找了一些相关的实现，基本上有两个:1、基于JQuery UI的控件2、某个兄弟手写的一个控件,具体实现如下，感兴趣的朋友可以参考下哈
由于项目中用到左右选择的控件，网上找了一些相关的实现，基本上有两个： 1、基于JQuery UI的控件： &这个看起来样式不错，而且使用起来功能也比较齐全，但是与传统的左边选择到右边的方式不同，有点别扭。 2、某个兄弟手写的一个控件： &这个符合我的需求，简单实用，但是不满足我的另一个需求，我的需求是右边的选择框需要能选择不同颜色的图片，而且这个样式有点不美观。怎奈自己写一个吧，费了我半天的劲，总算搞定了，贴出来与大家分享一下吧： &这个既满足了我功能的需求也满足了我对样式的要求。 关于颜色选择我引用了第三方的一个插件jquery.colorPicker.js，我比较喜欢简单实用并且美观的东西。 关于code，太多了不方便贴出来，说一下我的实现吧，左右的控件用的是jQuery easy UI的datagrid控件，我也是尝试了几个控件，只有这个符合我的要求，当然了对于datagrid也做了一些去掉标题、手动修改样式的一些处理。左右选择和上下控制基本上的逻辑是一样的，就是调用的datagrid的一些方法来实现了，当然这块控制灰掉button也做了很多的逻辑控制，目的就是让用户使用起来更加方便。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"&
&meta name="apple-mobile-web-app-capable" content="yes"&
&meta name="apple-mobile-web-app-status-bar-style" content="black"&
&meta name="format-detection" content="telephone=no"&
&title&三级联动多选下拉框&/title&
&script src="&?php echo base_url() ?&js/jquery-1.7.2.min.js"&&/script&
&link href="&?php echo base_url(); ?&css/buildfair/jquery-ui.css" rel="stylesheet" /&
&script src="&?php echo base_url() ?&js/jquery-ui.min.js"&&/script&
&script src="&?php echo base_url() ?&js/jquery.multiselect.min.js"&&/script&
&script src="&?php echo base_url() ?&js/jquery.multiselect.zh-cn.js"&&/script&
&link href="&?php echo base_url(); ?&css/buildfair/jquery.multiselect.css" rel="stylesheet"/&
&script src="&?php echo base_url() ?&js/jquery.multiselect.filter.js"&&/script&
&link href="&?php echo base_url(); ?&css/buildfair/jquery.multiselect.filter.css" rel="stylesheet"/&
&p&多选下拉框：&/p&
&select id="first_dist" multiple="multiple" data-level="1" style="display:"&
&?php foreach ( $firstDist as $row ): ?&
&option value="&?php echo $row[ 'id' ]; ?&"&&?php echo $row[ 'name' ]; ?&&/option&
&select id="second_dist" multiple="multiple" data-level="2" style="display:"&
&select id="third_dist" multiple="multiple" data-level="3" style="display:"&
&select id="fourth_dist" multiple="multiple" data-level="4" style="display:"&
&p&单选下拉框：&/p&
&select id="first_dist_single" style="display:"&
&?php foreach ( $firstDist as $row ): ?&
&option value="&?php echo $row[ 'id' ]; ?&"&&?php echo $row[ 'name' ]; ?&&/option&
&p&单选下拉框（带搜索功能）：&/p&
&select id="first_dist_single_filter" style="display:"&
&?php foreach ( $firstDist as $row ): ?&
&option value="&?php echo $row[ 'id' ]; ?&"&&?php echo $row[ 'name' ]; ?&&/option&
(function() {
// 默认只显示选择了的3个
var DEF_SHOW_SELELCTED_NUMBER = 3;
$("#first_dist_single").multiselect({
multiple: false,
header: "选择一项",
selectedList: 1
$("#first_dist_single_filter").multiselect({
multiple: false,
noneSelectedText: "请选择",
selectedList: 1
}).multiselectfilter();
$("#first_dist").multiselect({
selectedList: DEF_SHOW_SELELCTED_NUMBER,
noneSelectedText: '请选择省市',
close: function(event, ui) {
showNextDist($(this));
var showNextDist = function(obj) {
var level = obj.data('level'),
nextLevel = parseInt(level) + 1,
nextDistNode = null, defaultText = '';
if (parseInt(nextLevel) === 2) {
nextDistNode = $('#second_dist');
defaultText = '请选择市县';
} else if (parseInt(nextLevel) === 3) {
nextDistNode = $('#third_dist');
defaultText = '请选择地级市';
} else if (parseInt(nextLevel) === 4) {
nextDistNode = $('#fourth_dist');
defaultText = '请选择区镇';
var selectedArr = obj.multiselect("getChecked").map(function() {
return this.
var selectedVal = selectedArr.join(',');
if (selectedVal !== '') {
var url = '&?php echo site_url(); ?&/m/buildfair/get_district';
$.post(url, {upid: selectedVal, level: nextLevel}, function(data) {
if (data.success) {
var srcData = data.
if (nextDistNode !== null && srcData.length & 0) {
nextDistNode.html('');
for (index in srcData) {
var opt = srcData[index]
nextDistNode.append('&option value="' + opt.id + '"&' + opt.name + '&/option&');
nextDistNode.multiselect({
selectedList: DEF_SHOW_SELELCTED_NUMBER,
noneSelectedText: defaultText,
close: function(event, ui) {
showNextDist(nextDistNode);
}).multiselect('refresh');
}, 'json');
if (nextDistNode !== null) {
nextDistNode.multiselect().multiselect("destroy").hide();
var nextDistLevel = nextDistNode.data('level');
if (parseInt(nextDistLevel) === 2) {
$('#third_dist').multiselect().multiselect("destroy").hide();
$('#fourth_dist').multiselect().multiselect("destroy").hide();
} else if (parseInt(nextDistLevel) === 3) {
$('#fourth_dist').multiselect().multiselect("destroy").hide();
注：记得要引入相关的js和css文件。如果不知道去哪找，这里有个链接，在里面可以找到：
阅读(...) 评论()&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&demo&/title&
&script src=&jquery-1.4.4.min.js&&&/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.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);
&table align=&center& width=&288& border=&0& cellpadding=&0& cellspacing=&0&&
&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&
&td align=&center&&
&input type=&button& id=&addAll& value=& && & style=&width:50& /&&br /&
&input type=&button& id=&addOne& value=& & & style=&width:50& /&&br /&
&input type=&button& id=&removeOne& value=&&& style=&width:50& /&&br /&
&input type=&button& id=&removeAll& value=&&&& style=&width:50& /&&br /&
&td colspan=&4&&
&select name=&to& id=&to& multiple=&multiple& size=&10& style=&width:100%&&
&td align=&center&&
&input type=&button& id=&Top& value=&置顶& style=&width:50& /&&br /&
&input type=&button& id=&Up& value=&上移& style=&width:50& /&&br /&
&input type=&button& id=&Down& value=&下移& style=&width:50& /&&br /&
&input type=&button& id=&Buttom& value=&置底& style=&width:50& /&&br /&
还有一个插件&&&& 附上插件官网地址（multiselect2side plugin）：
转载来自 http://my.oschina.net/aki319/blog/73170
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：35783次
排名：千里之外
原创：40篇
转载：21篇
评论：18条
(1)(1)(1)(4)(3)(1)(3)(4)(2)(1)(2)(7)(7)(2)(7)(8)(1)(1)(5)