jQuery简单的列表选择器

所属分类:输入-选择框

 39083  393  查看评论 (46)
分享到微信朋友圈
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();
}
相关插件-选择框

jQuery手机端地区选择插件,三级联动省市区选择

areajs地区选择器,手机端地区选择器,省市区选择器
  选择框
 8991  77

JQ表单选择插件

插件包含单选按钮、复选框以及下拉选择菜单的功能,样式美化可自己编写css
  选择框
 56802  315

jquery城市选择

使用jquery简单制作的城市选择,学起来很简单,功能还不够完善。
  选择框
 40142  336

az索引滑动城市列表选择(原创)

城市列表选择 , 可滑动, 带历史记录
  选择框
 27318  308

讨论这个项目(46)回答他人问题或分享插件使用方法奖励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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复