ittutorial : php tutorial, tutorials for jquery, javascript, ajax and more

Jquery Tutorials

Customer Say

Home » jquery » About Jquery

Multiselect Dropdown with Checkbox using jQuery?

File name : index.php

<html>
<head>

<link rel="stylesheet" href="<?php echo base_url()?>assets/css/multiselect.css">
<link href="<?php echo base_url()?>assets/css/bootstrap.css" rel="stylesheet">
<link href="<?php echo base_url()?>assets/css/style.css" rel="stylesheet">
<style type="text/css">
ul,li { margin:0; padding:0; list-style:none;}
.label { color:#000; font-size:16px;}
</style>

</head>
<body>

<div class="demo-title"><h4>DEMO BY <span class="one">CODEX</span><span class="two">WORLD</span>: Multi-select Dropdown List with Checkbox using jQuery</h4></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="div-center">
<h2>jQuery MultiSelect Basic Uses</h2>
<select name="langOpt[]" multiple id="langOpt">
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
<option value="JavaScript">JavaScript</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<option value="HTML">HTML</option>
<option value="XML">XML</option>
</select>

<h2>jQuery MultiSelect With Search Option</h2>
<select name="langOpt2[]" multiple id="langOpt2">
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
<option value="JavaScript">JavaScript</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<option value="HTML">HTML</option>
<option value="XML">XML</option>
</select>

<h2>jQuery MultiSelect With Select All Option</h2>
<select name="langOpt3[]" multiple id="langOpt3">
<option value="C++">C++</option>
<option value="C#">C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
<option value="JavaScript">JavaScript</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
<option value="Android">Android</option>
<option value="iOS">iOS</option>
<option value="HTML">HTML</option>
<option value="XML">XML</option>
</select>

<h2>jQuery MultiSelect With Optgroup</h2>
<select name="langOptgroup[]" multiple id="langOptgroup">
<optgroup label="Programming Languages">
<option value="C++ / C#">C++ / C#</option>
<option value="Java">Java</option>
<option value="Objective-C">Objective-C</option>
</optgroup>
<optgroup label="Client-side scripting Languages">
<option value="JavaScript">JavaScript</option>
</optgroup>
<optgroup label="Server-side scripting Languages">
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Ruby on Rails">Ruby on Rails</option>
</optgroup>
<optgroup label="Mobile Platforms">
<option value="Android">Android</option>
<option value="iOS">iOS</option>
</optgroup>
<optgroup label="Document Markup Languages">
<option value="HTML">HTML</option>
<option value="XML">XML</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://demos.codexworld.com/includes/js/bootstrap.js"></script>

<script src="<?php echo base_url()?>assets/js/jquery.multiselect.js"></script>

<script>
$('#langOpt').multiselect({
columns: 1,
placeholder: 'Select Languages'
});

$('#langOpt2').multiselect({
columns: 1,
placeholder: 'Select Languages',
search: true
});

$('#langOpt3').multiselect({
columns: 1,
placeholder: 'Select Languages',
search: true,
selectAll: true
});

$('#langOptgroup').multiselect({
columns: 4,
placeholder: 'Select Languages',
search: true,
selectAll: true
});
</script>

</body>
</html>

<?php

// $selectedOptions = $_POST['langOpt'];
?>

multiselect.css

File name : index.php

.ms-options-wrap,
.ms-options-wrap * {
box-sizing: border-box;
}

.ms-options-wrap > button:focus,
.ms-options-wrap > button {
position: relative;
width: 100%;
text-align: left;
border: 1px solid #aaa;
background-color: #fff;
padding: 5px 20px 5px 5px;
margin-top: 1px;
font-size: 13px;
color: #aaa;
outline: none;
white-space: nowrap;
}

.ms-options-wrap > button:after {
content: ' ';
height: 0;
position: absolute;
top: 50%;
right: 5px;
width: 0;
border: 6px solid rgba(0, 0, 0, 0);
border-top-color: #999;
margin-top: -3px;
}

.ms-options-wrap > .ms-options {
position: absolute;
left: 0;
width: 100%;
margin-top: 1px;
margin-bottom: 20px;
background: white;
z-index: 2000;
border: 1px solid #aaa;
text-align:left;
}

.ms-options-wrap > .ms-options > .ms-search input {
width: 100%;
padding: 4px 5px;
border: none;
border-bottom: 1px groove;
outline: none;
}

.ms-options-wrap > .ms-options .ms-selectall {
display: inline-block;
font-size: .9em;
text-transform: lowercase;
text-decoration: none;
}
.ms-options-wrap > .ms-options .ms-selectall:hover {
text-decoration: underline;
}

.ms-options-wrap > .ms-options > .ms-selectall.global {
margin: 4px 5px;
}

.ms-options-wrap > .ms-options > ul > li.optgroup {
padding: 5px;
}
.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
border-top: 1px solid #aaa;
}

.ms-options-wrap > .ms-options > ul > li.optgroup .label {
display: block;
padding: 5px 0 0 0;
font-weight: bold;
}

.ms-options-wrap > .ms-options > ul label {
position: relative;
display: inline-block;
width: 100%;
padding: 8px 4px;
margin: 1px 0;
}

.ms-options-wrap > .ms-options > ul li.selected label,
.ms-options-wrap > .ms-options > ul label:hover {
background-color: #efefef;
}

.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
margin-right: 5px;
position: absolute;
left: 4px;
top: 7px;
}

style.css

File name : index.php

body { margin-top: 80px; }
.navbar-fixed-top .nav { padding: 15px 0;}
.navbar-fixed-top .navbar-brand {padding: 0 15px;}
.navbar:before {content: "";width: 100%;height: 3px;background: url(../images/rainbow.png) 0 0 no-repeat;background-size: 100%;position: relative;float: left;z-index: 1;}
.navbar-collapse ul li a{ text-transform:uppercase;}
.social_btn{ margin-left:60px; margin-top:10px;}
.social_btn .flike{ width:100px;}
.social_btn .tflow{ width:240px;}
.social_btn .gplus{ width:150px;}
.post_demo_list{ margin-bottom:40px;width: 100%;float: left;}
div.demo_list_main{ width: 100%;}
div.demo_list {border-left: 4px solid #7ad03a;padding: 1px 12px;background-color:#F1F1F1;-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); width: 60%; float: left;}
div.demo_list_inner {padding: 1px 12px;background-color:#F1F1F1;-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); width: 10%;float: left;margin: 5px 5px 2px;text-align: center;}
.demo_list_inner a{font-size: 14px;color: #FF7361; font-weight: bold;}
div.demo_list {margin: 5px 15px 2px;}
div.demo_list p {margin: .5em 0;padding: 2px;font-size: 13px;line-height: 1.5;}
.demo_list a {text-decoration: none;padding-bottom: 2px;color: #0074a2;-webkit-transition-property: border,background,color;transition-property: border,background,color;-webkit-transition-duration: .05s;transition-duration: .05s;-webkit-transition-timing-function: ease-in-out;transition-timing-function: ease-in-out;}
.demo_list a:hover{ text-decoration:underline;}
.bar-header{width: 100%;height: 100px;text-align: center; margin-bottom:10px;}
.bar-footer{width: 100%;height: 25px;text-align: center; margin-bottom:35px;margin-top: 15px;}
.bar-header.affiliate{height: auto;}
.post_demo_list.download{ margin-bottom:0px;}
.div-center{width:100%; text-align:center;}
/* For Pagination Links by CodexWorld */
div.pagination {
font-family: "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif;
padding:20px;
margin:7px;
}

div.pagination a {
margin: 2px;
padding: 0.5em 0.64em 0.43em 0.64em;
background-color: #f92d50 !important;
text-decoration: none; /* no underline */
color: #fff;
border-radius:0px !important;
font-size: 18px;
border:none !important;
}
div.pagination a:hover, div.pagination a:active {
padding: 0.5em 0.64em 0.43em 0.64em;
margin: 2px;
background-color: #e82c4b !important;
color: #fff;
}
div.pagination li.current a{
padding: 0.5em 0.64em 0.43em 0.64em;
margin: 2px;
background-color: #f75d77 !important;
color: #fff;
}
div.pagination li.current a{font-size: 22px;}
div.pagination span.disabled {
display:none;
}
.demo-title{width: 100%;text-align: center;background: #02C54C;color: #ffffff;padding: 5px;margin-bottom: 10px;}
.demo-title h4{font-size: 22px;font-weight: 700;text-shadow: 2px 2px #00A058;}
@media(min-width:768px) {
.navbar-fixed-top .nav { padding: 2px 0; }
.navbar-fixed-top .navbar-brand { padding: 15px 0;}
}
@media only screen and (min-width: 320px) and (max-width: 767px){
.navbar-fixed-top .navbar-brand {padding: 10px 15px !important;}
/*.col-lg-12 h1{ margin-top:-45px !important;}*/
div.demo_list {width: 95% !important;}
div.demo_list_inner{width: 25%;margin: 5px 17px 2px;}
.bar-header.affiliate img{width:100%;}
.bar-footer.affiliate img{width:100%;}
.bar-header.yads iframe, .bar-footer.yads iframe{width:98%;}
}

jquery.multiselect.js

File name : index.php

/**
* Display a nice easy to use multiselect list
* @Version: 2.0
* @Author: Patrick Springstubbe
* @Contact: @JediNobleclem
* @Website: springstubbe.us
* @Source: https://github.com/nobleclem/jQuery-MultiSelect
* @Notes: If select list is hidden on page load use the jquery.actual plugin
* to resolve issues with preselected items placeholder text
* https://github.com/dreamerslab/jquery.actual
*
* Usage:
* $('select[multiple]').multiselect();
* $('select[multiple]').multiselect({ placeholder: 'Select options' });
* $('select[multiple]').multiselect('reload');
* $('select[multiple]').multiselect( 'loadOption', [{
* name : 'Option Name 1',
* value : 'option-value-1',
* checked: false
* },{
* name : 'Option Name 2',
* value : 'option-value-2',
* checked: false
* }]);
*
**/
(function($){
var defaults = {
placeholder : 'Select options', // text to use in dummy input
columns : 1, // how many columns should be use to show options
search : false, // include option search box
// search filter options
searchOptions : {
'default' : 'Search', // search input placeholder text
showOptGroups: false, // show option group titles if no options remaining
onSearch : function( element ){} // fires on keyup before search on options happens
},
selectAll : false, // add select all option
selectGroup : false, // select entire optgroup
minHeight : 200, // minimum height of option overlay
maxHeight : null, // maximum height of option overlay
showCheckbox : true, // display the checkbox to the user
jqActualOpts : {}, // options for jquery.actual

// Callbacks
onLoad : function( element ) { // fires at end of list initialization
$(element).hide();
},
onOptionClick : function( element, option ){}, // fires when an option is clicked

// @NOTE: these are for future development
maxWidth : null, // maximum width of option overlay (or selector)
minSelect : false, // minimum number of items that can be selected
maxSelect : false, // maximum number of items that can be selected
};

var msCounter = 1;

function MultiSelect( element, options )
{
this.element = element;
this.options = $.extend( {}, defaults, options );
this.load();
}

MultiSelect.prototype = {
/* LOAD CUSTOM MULTISELECT DOM/ACTIONS */
load: function() {
var instance = this;

// make sure this is a select list and not loaded
if( (instance.element.nodeName != 'SELECT') || $(instance.element).hasClass('jqmsLoaded') ) {
return true;
}

// sanity check so we don't double load on a select element
$(instance.element).addClass('jqmsLoaded');

// add option container
$(instance.element).after('<div class="ms-options-wrap"><button>None Selected</button><div class="ms-options"><ul></ul></div></div>');
var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
var optionsList = optionsWrap.find('> ul');
var hasOptGroup = $(instance.element).find('optgroup').length ? true : false;

var maxWidth = null;
if( typeof instance.options.width == 'number' ) {
optionsWrap.parent().css( 'position', 'relative' );
maxWidth = instance.options.width;
}
else if( typeof instance.options.width == 'string' ) {
$( instance.options.width ).css( 'position', 'relative' );
maxWidth = '100%';
}
else {
optionsWrap.parent().css( 'position', 'relative' );
}

var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
if( instance.options.maxHeight ) {
maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
}

maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;

optionsWrap.css({
maxWidth : maxWidth,
minHeight: instance.options.minHeight,
maxHeight: maxHeight,
overflow : 'auto'
}).hide();

// isolate options scroll
// @source: https://github.com/nobleclem/jQuery-IsolatedScroll
optionsWrap.bind( 'touchmove mousewheel DOMMouseScroll', function ( e ) {
if( ($(this).outerHeight() < $(this)[0].scrollHeight) ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;

if( ($(this).outerHeight() + $(this)[0].scrollTop) > $(this)[0].scrollHeight ) {
e.preventDefault();
this.scrollTop += ( delta < 0 ? 1 : -1 );
}
}
});

// hide options menus if click happens off of the list placeholder button
$(document).off('click.ms-hideopts').on('click.ms-hideopts', function( event ){
if( !$(event.target).closest('.ms-options-wrap').length ) {
$('.ms-options-wrap > .ms-options:visible').hide();
}
});

// disable button action
placeholder.bind('mousedown',function( event ){
// ignore if its not a left click
if( event.which != 1 ) {
return true;
}

// hide other menus before showing this one
$('.ms-options-wrap > .ms-options:visible').each(function(){
if( $(this).parent().prev()[0] != optionsWrap.parent().prev()[0] ) {
$(this).hide();
}
});

// show/hide options
optionsWrap.toggle();

// recalculate height
if( optionsWrap.is(':visible') ) {
optionsWrap.css( 'maxHeight', '' );

var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
if( instance.options.maxHeight ) {
maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
}
maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;

optionsWrap.css( 'maxHeight', maxHeight );
}
}).click(function( event ){ event.preventDefault(); });

// add placeholder copy
if( instance.options.placeholder ) {
placeholder.text( instance.options.placeholder );
}

// add search box
if( instance.options.search ) {
optionsList.before('<div class="ms-search"><input type="text" value="" placeholder="'+ instance.options.searchOptions['default'] +'" /></div>');

var search = optionsWrap.find('.ms-search input');
search.on('keyup', function(){
// ignore keystrokes that don't make a difference
if( $(this).data('lastsearch') == $(this).val() ) {
return true;
}

$(this).data('lastsearch', $(this).val() );

// USER CALLBACK
if( typeof instance.options.searchOptions.onSearch == 'function' ) {
instance.options.searchOptions.onSearch( instance.element );
}

// search non optgroup li's
optionsList.find('li:not(.optgroup)').each(function(){
var optText = $(this).text();

// show option if string exists
if( optText.toLowerCase().indexOf( search.val().toLowerCase() ) > -1 ) {
$(this).show();
}
// don't hide selected items
else if( !$(this).hasClass('selected') ) {
$(this).hide();
}

// hide / show optgroups depending on if options within it are visible
if( !instance.options.searchOptions.showOptGroups && $(this).closest('li.optgroup') ) {
$(this).closest('li.optgroup').show();

if( $(this).closest('li.optgroup').find('li:visible').length ) {
$(this).closest('li.optgroup').show();
}
else {
$(this).closest('li.optgroup').hide();
}
}
});
});
}

// add global select all options
if( instance.options.selectAll ) {
optionsList.before('<a href="#" class="ms-selectall global">Select all</a>');
}

// handle select all option
optionsWrap.on('click', '.ms-selectall', function( event ){
event.preventDefault();

if( $(this).hasClass('global') ) {
// check if any selected if so then select them
if( optionsList.find('li:not(.optgroup)').filter(':not(.selected)').length ) {
optionsList.find('li:not(.optgroup)').filter(':not(.selected)').find('input[type="checkbox"]').trigger('click');
}
// deselect everything
else {
optionsList.find('li:not(.optgroup).selected input[type="checkbox"]').trigger('click');
}
}
else if( $(this).closest('li').hasClass('optgroup') ) {
var optgroup = $(this).closest('li.optgroup');

// check if any selected if so then select them
if( optgroup.find('li:not(.selected)').length ) {
optgroup.find('li:not(.selected) input[type="checkbox"]').trigger('click');
}
// deselect everything
else {
optgroup.find('li.selected input[type="checkbox"]').trigger('click');
}
}
});

// add options to wrapper
var options = [];
$(instance.element).children().each(function(){
if( this.nodeName == 'OPTGROUP' ) {
var groupOptions = [];

$(this).children('option').each(function(){
groupOptions[ $(this).val() ] = {
name : $(this).text(),
value : $(this).val(),
checked: $(this).prop( 'selected' )
};
});

options.push({
label : $(this).attr('label'),
options: groupOptions
});
}
else if( this.nodeName == 'OPTION' ) {
options.push({
name : $(this).text(),
value : $(this).val(),
checked: $(this).prop( 'selected' )
});
}
else {
// bad option
return true;
}
});
instance.loadOptions( options );

// COLUMNIZE
if( hasOptGroup ) {
// float non grouped options
optionsList.find('> li:not(.optgroup)').css({
float: 'left',
width: (100 / instance.options.columns) +'%'
});

// add CSS3 column styles
optionsList.find('li.optgroup').css({
clear: 'both'
}).find('> ul').css({
'column-count' : instance.options.columns,
'column-gap' : 0,
'-webkit-column-count': instance.options.columns,
'-webkit-column-gap' : 0,
'-moz-column-count' : instance.options.columns,
'-moz-column-gap' : 0
});

// for crappy IE versions float grouped options
if( this._ieVersion() && (this._ieVersion() < 10) ) {
optionsList.find('li.optgroup > ul > li').css({
float: 'left',
width: (100 / instance.options.columns) +'%'
});
}
}
else {
// add CSS3 column styles
optionsList.css({
'column-count' : instance.options.columns,
'column-gap' : 0,
'-webkit-column-count': instance.options.columns,
'-webkit-column-gap' : 0,
'-moz-column-count' : instance.options.columns,
'-moz-column-gap' : 0
});

// for crappy IE versions float grouped options
if( this._ieVersion() && (this._ieVersion() < 10) ) {
optionsList.find('> li').css({
float: 'left',
width: (100 / instance.options.columns) +'%'
});
}
}

// BIND SELECT ACTION
optionsWrap.on( 'click', 'input[type="checkbox"]', function(){
$(this).closest( 'li' ).toggleClass( 'selected' );

var select = optionsWrap.parent().prev();

// toggle clicked option
select.find('option[value="'+ $(this).val() +'"]').prop(
'selected', $(this).is(':checked')
).closest('select').trigger('change');

if( typeof instance.options.onOptionClick == 'function' ) {
instance.options.onOptionClick();
}

instance._updatePlaceholderText();
});

// hide native select list
if( typeof instance.options.onLoad === 'function' ) {
instance.options.onLoad( instance.element );
}
else {
$(instance.element).hide();
}
},

/* LOAD SELECT OPTIONS */
loadOptions: function( options, overwrite ) {
overwrite = (typeof overwrite == 'boolean') ? overwrite : true;

var instance = this;
var optionsList = $(instance.element).next('.ms-options-wrap').find('> .ms-options > ul');

if( overwrite ) {
optionsList.find('> li').remove();
}

for( var key in options ) {
var thisOption = options[ key ];
var container = $('<li></li>');

// optgroup
if( thisOption.hasOwnProperty('options') ) {
container.addClass('optgroup');
container.append('<span class="label">'+ thisOption.label +'</span>');
container.find('> .label').css({
clear: 'both'
});

if( instance.options.selectGroup ) {
container.append('<a href="#" class="ms-selectall">Select all</a>')
}

container.append('<ul></ul>');

for( var gKey in thisOption.options ) {
var thisGOption = thisOption.options[ gKey ];
var gContainer = $('<li></li>').addClass('ms-reflow');

instance._addOption( gContainer, thisGOption );

container.find('> ul').append( gContainer );
}
}
// option
else if( thisOption.hasOwnProperty('value') ) {
container.addClass('ms-reflow')

instance._addOption( container, thisOption );
}

optionsList.append( container );
}

optionsList.find('.ms-reflow input[type="checkbox"]').each(function( idx ){
if( $(this).css('display').match(/block$/) ) {
var checkboxWidth = $(this).outerWidth();
checkboxWidth = checkboxWidth ? checkboxWidth : 15;

$(this).closest('label').css(
'padding-left',
(parseInt( $(this).closest('label').css('padding-left') ) * 2) + checkboxWidth
);

$(this).closest('.ms-reflow').removeClass('ms-reflow');
}
});

instance._updatePlaceholderText();
},

/* RESET THE DOM */
unload: function() {
$(this.element).next('.ms-options-wrap').remove();
$(this.element).show(function(){
$(this).css('display','').removeClass('jqmsLoaded');
});
},

/* RELOAD JQ MULTISELECT LIST */
reload: function() {
// remove existing options
$(this.element).next('.ms-options-wrap').remove();
$(this.element).removeClass('jqmsLoaded');

// load element
this.load();
},

/** PRIVATE FUNCTIONS **/
// update selected placeholder text
_updatePlaceholderText: function(){
var instance = this;
var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
var select = optionsWrap.parent().prev();

// get selected options
var selOpts = [];
select.find('option:selected').each(function(){
selOpts.push( $(this).text() );
});

// UPDATE PLACEHOLDER TEXT WITH OPTIONS SELECTED
placeholder.text( selOpts.join( ', ' ) );
var copy = placeholder.clone().css({
display : 'inline',
width : 'auto',
visibility: 'hidden'
}).appendTo( optionsWrap.parent() );

// if the jquery.actual plugin is loaded use it to get the widths
var copyWidth = (typeof $.fn.actual !== 'undefined') ? copy.actual( 'width', instance.options.jqActualOpts ) : copy.width();
var placeWidth = (typeof $.fn.actual !== 'undefined') ? placeholder.actual( 'width', instance.options.jqActualOpts ) : placeholder.width();

// if copy is larger than button width use "# selected"
if( copyWidth > placeWidth ) {
placeholder.text( selOpts.length +' selected' );
}
// if options selected then use those
else if( selOpts.length ) {
placeholder.text( selOpts.join( ', ' ) );
}
// replace placeholder text
else {
placeholder.text( instance.options.placeholder );
}

// remove dummy element
copy.remove();
},

// Add option to the custom dom list
_addOption: function( container, option ) {
container.text( option.name );
container.prepend(
$('<input type="checkbox" value="" title="" />')
.val( option.value )
.attr( 'title', option.name )
.attr( 'id', 'ms-opt-'+ msCounter )
);

if( option.checked ) {
container.addClass('default');
container.addClass('selected');
container.find( 'input[type="checkbox"]' ).prop( 'checked', true );
}

var label = $('<label></label>').attr( 'for', 'ms-opt-'+ msCounter );
container.wrapInner( label );

if( !this.options.showCheckbox ) {
container.find('input[id="ms-opt-'+ msCounter +'"]').hide();
}

msCounter = msCounter + 1;
},

// check ie version
_ieVersion: function() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
};

// ENABLE JQUERY PLUGIN FUNCTION
$.fn.multiselect = function( options ){
var args = arguments;
var ret;

// menuize each list
if( (options === undefined) || (typeof options === 'object') ) {
return this.each(function(){
if( !$.data( this, 'plugin_multiselect' ) ) {
$.data( this, 'plugin_multiselect', new MultiSelect( this, options ) );
}
});
} else if( (typeof options === 'string') && (options[0] !== '_') && (options !== 'init') ) {
this.each(function(){
var instance = $.data( this, 'plugin_multiselect' );

if( instance instanceof MultiSelect && typeof instance[ options ] === 'function' ) {
ret = instance[ options ].apply( instance, Array.prototype.slice.call( args, 1 ) );
}

// special destruct handler
if( options === 'unload' ) {
$.data( this, 'plugin_multiselect', null );
}
});

return ret;
}
};
}(jQuery));

File name : index.php

Itechtuto

Jquery Tutorials

Customer Say

Multiselect Dropdown with Checkbox using jQuery?

File name : index.php

File name : index.php

File name : index.php

File name : index.php

File name : index.php

Connect Us Socially:

Quick Links