Created
February 9, 2012 10:04
-
-
Save electricg/1778995 to your computer and use it in GitHub Desktop.
jQuery plugins for different <select> functionalities
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
// Autocomplete from the select | |
$.fn.autoSelect = function(options) {// plugin definition | |
var defaults = { | |
prex : 'listBean_field', | |
subx : 'Col', | |
prexTo : 'listBean_field', | |
subxTo : 'Name', | |
resetVal : -1 | |
}; | |
// extend default options with those provided | |
var opts = $.extend(defaults, options); | |
// implementation code | |
return this.each(function() { | |
var $wrapper = $(this), | |
$colList = $wrapper.find('select[name^=' + opts.prex + '][name$=' + opts.subx + ']'), | |
regex = new RegExp(opts.prex + '(\\d+)' + opts.subx); | |
$colList.bind('change', function() { | |
var $this = $(this), | |
name = $this.attr('name'), | |
val, | |
n = name.match(regex); | |
if ($this.val() != opts.resetVal) { | |
val = $this.find(':selected').text(); | |
} | |
else { | |
val = ''; | |
} | |
$wrapper.find('input[name=' + opts.prexTo + n[1] + opts.subxTo + ']').val(val); | |
}); | |
}); | |
};// end plugin definition | |
// Activate from the checkbox | |
$.fn.selectActivateField = function(options) {// plugin definition | |
var defaults = { | |
prex : 'field', | |
subx : 'DateInd', | |
prexTo : 'listBean_field', | |
subxTo : 'DataFormat' | |
}; | |
// extend default options with those provided | |
var opts = $.extend(defaults, options); | |
// implementation code | |
return this.each(function() { | |
var $wrapper = $(this), | |
$checkList = $wrapper.find('input[name^=' + opts.prex + '][name$=' + opts.subx + ']'), | |
regex = new RegExp(opts.prex + '(\\d+)' + opts.subx); | |
function check($what) { | |
var name = $what.attr('name'), | |
val, | |
n = name.match(regex), | |
$el = $wrapper.find(':input[name=' + opts.prexTo + n[1] + opts.subxTo + ']'); | |
if ($what.is(':checked')) { | |
$el.removeAttr('disabled').removeClass('invisible'); | |
} | |
else { | |
$el.attr('disabled', 'disabled').addClass('invisible'); | |
} | |
} | |
$checkList.bind('change', function() { | |
check($(this)); | |
}); | |
// initialize | |
$checkList.each(function() { | |
check($(this)); | |
}); | |
}); | |
};// end plugin definition | |
// Color the empty select | |
$.fn.selectColored = function(options) { | |
var defaults = { | |
def : -1, | |
classSel : 'colorize', | |
classEmpty : 'empty', | |
classDef : 'def' | |
}; | |
// extend default options with those provided | |
var opts = $.extend(defaults, options); | |
// implementation code | |
return this.each(function() { | |
var $select = $(this); | |
$select | |
.addClass(opts.classSel) | |
.find('option[value="' + opts.def + '"]') | |
.addClass(opts.classDef); | |
function color() { | |
$select.toggleClass(opts.classEmpty, ($select.val() == opts.def)); | |
} | |
$select.bind('change', function() { | |
color(); | |
}); | |
// initialize | |
color(); | |
}); | |
};// end plugin definition | |
// Remove already choose options | |
$.fn.selectRemoveOption = function(options) { | |
var defaults = { | |
def : -1, | |
classRemove : 'remove', | |
tagRemove : 'span' | |
}; | |
// extend default options with those provided | |
var opts = $.extend(defaults, options); | |
var $select = $(this); | |
// use the data method to store the previous value for each select box | |
$select.data('valOld', ''); | |
// implementation code | |
return this.each(function() { | |
var $this = $(this), | |
valNew, | |
$justLeft, $toRemove; | |
$this.addClass(opts.classRemove); | |
function remove() { | |
var $others = $select.not($this); | |
valNew = $this.val(); | |
// enable the just left option | |
$justLeft = $others.find(opts.tagRemove + '[value="' + $this.data('valOld') + '"]'); | |
$justLeft.replaceWith('<option value="' + $this.data('valOld') + '">' + $justLeft.html() + '</option>'); | |
// disable the selected option | |
if (valNew != opts.def) { | |
$toRemove = $others.find('option[value="' + valNew + '"]'); | |
$toRemove.replaceWith('<' + opts.tagRemove + ' value="' + valNew + '">' + $toRemove.html() + '</' + opts.tagRemove + '>'); | |
} | |
// memorize the value for the next change | |
$this.data('valOld', valNew); | |
} | |
// use the focus to store the previous value, since it's the only action certainly | |
// called at least for the first time. for the subsequent times, if focus is not | |
// called, the value is anyway stored in the object | |
$this.bind('focus', function() { | |
$this.data('valOld', $this.val()); | |
}) | |
.bind('change', function() { | |
remove(); | |
}); | |
// initialize | |
remove(); | |
}); | |
}; // end plugin definition | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment