Skip to content

Instantly share code, notes, and snippets.

@abhinavguptas
Created January 3, 2012 06:49
Show Gist options
  • Save abhinavguptas/1553837 to your computer and use it in GitHub Desktop.
Save abhinavguptas/1553837 to your computer and use it in GitHub Desktop.
jQuery plugin to draw a multi select picklist
ul.container-list {
border-color: #EEE;
border-style: solid;
border-width: 1px;
overflow-x: auto;
overflow-y: scroll;
display: block;
list-style : none;
color : #444;
padding : 0px;
background-color : white;
}
ul.container-list li {
padding : 6px;
margin : 0px;
cursor : pointer;
border-bottom : 1px #EEE solid;
}
(function($) {
$.fn.twinBoxMultiSelectList = function(options) {
var settings = $.extend(true, {
// all styling related options
styles: {
containerClass: 'container-list',
selectedItemClass: 'selected-item',
width: '150px',
height: '170px'
},
// this will append the generated list in the target element
append2TargetElem: true
}, options);
/*
Returns true if the select option is selected
*/
function isOptionSelected(opt) {
var selectedAttr = opt.attr('selected');
return selectedAttr && selectedAttr == 'selected';
}
/*
Marks the list item as selected
*/
function markItemSelected(liItem) {
liItem.addClass(settings.styles.selectedItemClass);
}
// Create a blank picklist
var pickList = $('<ul/>')
.css('max-height', settings.styles.height)
.css('width', settings.styles.width)
.css('min-height', settings.styles.height)
.attr('class', settings.styles.containerClass)
.attr('usageType', 'available');
var selPickList = pickList.clone();
selPickList.attr('usageType', 'selected');
this.find('option').each(
function() {
var $this = $(this);
var newLi = $('<li/>').html($this.html());
// associate this option with the list item
newLi.data('option', $this);
if (isOptionSelected($this)) {
newLi.appendTo(selPickList);
} else {
newLi.appendTo(pickList);
}
});
if (settings.append2TargetElem) {
pickList.appendTo($(options.availableList));
selPickList.appendTo($(options.selectedList));
} else {
$(options.availableList).html(pickList);
$(options.selectedList).html(selPickList);
}
function listItemClickHandler() {
return $(this).slideUp('fast', function() {
var li = $(this);
var liParent = li.parent();
var selOption = li.data('option');
li = li
.remove()
.data('option', selOption)
.click(listItemClickHandler);
var appendToList = null;
if (liParent.attr('usageType') == 'selected') {
// un select
appendToList = pickList;
selOption.removeAttr('selected');
selOption.attr('selected', false);
} else {
appendToList = selPickList;
selOption.attr('selected', 'selected');
}
li.appendTo(appendToList); li.slideDown();
return this;
}
);//fadeOut
}
if (settings.searchBox) {
$(settings.searchBox).keyup(function(){
var searchBoxVal = $(this).val().toLowerCase();
pickList.find('li').each(
function() {
var li = $(this);
if (li.html().toLowerCase().indexOf(searchBoxVal) < 0)
li.hide();
else {
li.show();
}
}
);
});
}
// associate click handler with the list item
pickList.find('li').click(listItemClickHandler);
selPickList.find('li').click(listItemClickHandler);
this.hide();
// maintain chainablity
return this;
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment