jQuery简单的列表选择器

所属分类:输入-选择框

 30465  315  查看评论 (45)
分享到微信朋友圈
X
jQuery简单的列表选择器 ie兼容8

更新时间:2017/10/26 上午11:42:01

更新说明:对列表选择功能进行优化

1. 新增多选功能    在单选基础上进行变动,原有点击事件将会清除其他项的selected-item样式,现在将判断是否已有selected-item样式进行变动。添加时将所有包含selected-item样式的项进行列表选择。

2. 新增列表项可拖动且可进行拖动排序    根据jQuery-ui列表排序sortable、拖动放置功能进行设计。

$('.item-box').sortable({
	placeholder: 'item-placeholder',
	connectWith: '.item-box',
	revert: true
}).droppable({
	accept: '.item',
	hoverClass: 'item-box-hover',
	drop: function(event, ui){
		setTimeout(function(){
		        ui.draggable.removeClass('selected-item');
		}, 500);
	}
}).disableSelection();

初始化列表项选择事件

function initItemEvent(){...}

单击列表单击: 改变样式

var itemClickHandler = function(){
    $(this).parent('.item-box').find('.item').removeClass('selected-item');
    $(this).addClass('selected-item');
}

左边列表项移至右边

var leftMoveRight = function(){
    selectTitle.find('.list-body .right-box').append($(this).removeClass('selected-item'));
    initItemEvent();
}

左边列表项移至右边

var leftMoveRight = function(){
    selectTitle.find('.list-body .right-box').append($(this).removeClass('selected-item'));
    initItemEvent();
}

右边列表项移至左边

var rightMoveLeft = function(){
    selectTitle.find('.list-body .left-box').append($(this).removeClass('selected-item'));
    initItemEvent();
}
相关插件-选择框

省,市,县三级联动完整版

本插件在多位前辈的基础上经过改良,现已功能齐全,支持编辑 查看功能 支持多款主流浏览器,
  选择框
 56247  399

zcity全国城市三级联动插件(原创)

zcity全国城市三级联动,模拟下拉框,样式完全自定义,可扩展多级联动;
  选择框
 23883  252

jQuery世界地区三级联动

jQuery世界地区三级联动带搜索功能
  选择框
 34766  295

jQuery房屋位置选择单选,整行选,全选

一个智能管理系统的楼层房屋选择
  选择框
 22523  248

讨论这个项目(45)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Steven Chen 0
    2019/9/17 15:38:29
    谟wanan 0
    2018/9/25 15:01:29
    求教,如何右侧回去左侧时,回到原位置。。
        泡??斌メ1
        2018/11/15 20:13:33
        只需对每个列表项加个顺序属性,无论怎么移动都按照顺序查找,然后找到合适位置插入即可
    回复
    KunKing 0
    2018/9/3 20:22:09
    您好,问下,如何获取到右边的选择列表啊 回复
    下页--孤云 0
    2018/8/16 15:51:18
    fillter 0
    2018/7/11 17:46:33
    clamp 0
    2018/5/8 20:28:02
    黑喵警长 0
    2018/4/12 14:59:35
    真好真好真好啊 回复
    xiey 0
    2018/3/30 17:24:29
    挺好的一个插件 回复
    大辣子与酒与八月 0
    2018/1/31 10:17:30
    很厉害,如果再可以输入检索的话就更美了 回复
    小萝莉也有爆脾气 0
    2018/1/22 14:03:25
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复