jquery .val () returns w.fn.init [select # test.searchable]

Question

When executing the code method

'get_selected' : function () { return this.$element.val(); },

returns w.fn.init [select#test.searchable] instead of an array of values.

If you select several items and see the output in the console, you can see it.

The question is, where am I mistaken or what am I doing wrong?

 /* * MultiSelect v0.9.12 * Copyright (c) 2012 Louis Cuny * * This program is free software. It comes without any warranty, to * the extent permitted by applicable law. You can redistribute it * and/or modify it under the terms of the Do What The Fuck You Want * To Public License, Version 2, as published by Sam Hocevar. See * http://sam.zoy.org/wtfpl/COPYING for more details. */ !function ($) { "use strict"; /* MULTISELECT CLASS DEFINITION * ====================== */ var MultiSelect = function (element, options) { this.options = options; this.$element = $(element); this.$container = $('<div/>', { 'class': "ms-container" }); this.$selectableContainer = $('<div/>', { 'class': 'ms-selectable' }); this.$selectionContainer = $('<div/>', { 'class': 'ms-selection' }); this.$selectableUl = $('<ul/>', { 'class': "ms-list", 'tabindex' : '-1' }); this.$selectionUl = $('<ul/>', { 'class': "ms-list", 'tabindex' : '-1' }); this.scrollTo = 0; this.elemsSelector = 'li:visible:not(.ms-optgroup-label,.ms-optgroup-container,.'+options.disabledClass+')'; }; MultiSelect.prototype = { constructor: MultiSelect, init: function(){ var that = this, ms = this.$element; if (ms.next('.ms-container').length === 0){ ms.css({ position: 'absolute', left: '-9999px' }); ms.attr('id', ms.attr('id') ? ms.attr('id') : Math.ceil(Math.random()*1000)+'multiselect'); this.$container.attr('id', 'ms-'+ms.attr('id')); this.$container.addClass(that.options.cssClass); ms.find('option').each(function(){ that.generateLisFromOption(this); }); this.$selectionUl.find('.ms-optgroup-label').hide(); if (that.options.selectableHeader){ that.$selectableContainer.append(that.options.selectableHeader); } that.$selectableContainer.append(that.$selectableUl); if (that.options.selectableFooter){ that.$selectableContainer.append(that.options.selectableFooter); } if (that.options.selectionHeader){ that.$selectionContainer.append(that.options.selectionHeader); } that.$selectionContainer.append(that.$selectionUl); if (that.options.selectionFooter){ that.$selectionContainer.append(that.options.selectionFooter); } that.$container.append(that.$selectableContainer); that.$container.append(that.$selectionContainer); ms.after(that.$container); that.activeMouse(that.$selectableUl); that.activeKeyboard(that.$selectableUl); var action = that.options.dblClick ? 'dblclick' : 'click'; that.$selectableUl.on(action, '.ms-elem-selectable', function(){ that.select($(this).data('ms-value')); }); that.$selectionUl.on(action, '.ms-elem-selection', function(){ that.deselect($(this).data('ms-value')); }); that.activeMouse(that.$selectionUl); that.activeKeyboard(that.$selectionUl); ms.on('focus', function(){ that.$selectableUl.focus(); }); } var selectedValues = ms.find('option:selected').map(function(){ return $(this).val(); }).get(); that.select(selectedValues, 'init'); if (typeof that.options.afterInit === 'function') { that.options.afterInit.call(this, this.$container); } }, 'generateLisFromOption' : function(option, index, $container){ var that = this, ms = that.$element, attributes = "", $option = $(option); for (var cpt = 0; cpt < option.attributes.length; cpt++){ var attr = option.attributes[cpt]; if(attr.name !== 'value' && attr.name !== 'disabled'){ attributes += attr.name+'="'+attr.value+'" '; } } var selectableLi = $('<li '+attributes+'><span>'+that.escapeHTML($option.text())+'</span></li>'), selectedLi = selectableLi.clone(), value = $option.val(), elementId = that.sanitize(value); selectableLi .data('ms-value', value) .addClass('ms-elem-selectable') .attr('id', elementId+'-selectable'); selectedLi .data('ms-value', value) .addClass('ms-elem-selection') .attr('id', elementId+'-selection') .hide(); if ($option.attr('disabled') || ms.attr('disabled')){ selectedLi.addClass(that.options.disabledClass); selectableLi.addClass(that.options.disabledClass); } var $optgroup = $option.parent('optgroup'); if ($optgroup.length > 0){ var optgroupLabel = $optgroup.attr('label'), optgroupId = that.sanitize(optgroupLabel), $selectableOptgroup = that.$selectableUl.find('#optgroup-selectable-'+optgroupId), $selectionOptgroup = that.$selectionUl.find('#optgroup-selection-'+optgroupId); if ($selectableOptgroup.length === 0){ var optgroupContainerTpl = '<li class="ms-optgroup-container"></li>', optgroupTpl = '<ul class="ms-optgroup"><li class="ms-optgroup-label"><span>'+optgroupLabel+'</span></li></ul>'; $selectableOptgroup = $(optgroupContainerTpl); $selectionOptgroup = $(optgroupContainerTpl); $selectableOptgroup.attr('id', 'optgroup-selectable-'+optgroupId); $selectionOptgroup.attr('id', 'optgroup-selection-'+optgroupId); $selectableOptgroup.append($(optgroupTpl)); $selectionOptgroup.append($(optgroupTpl)); if (that.options.selectableOptgroup){ $selectableOptgroup.find('.ms-optgroup-label').on('click', function(){ var values = $optgroup.children(':not(:selected, :disabled)').map(function(){ return $(this).val();}).get(); that.select(values); }); $selectionOptgroup.find('.ms-optgroup-label').on('click', function(){ var values = $optgroup.children(':selected:not(:disabled)').map(function(){ return $(this).val();}).get(); that.deselect(values); }); } that.$selectableUl.append($selectableOptgroup); that.$selectionUl.append($selectionOptgroup); } index = index === undefined ? $selectableOptgroup.find('ul').children().length : index + 1; selectableLi.insertAt(index, $selectableOptgroup.children()); selectedLi.insertAt(index, $selectionOptgroup.children()); } else { index = index === undefined ? that.$selectableUl.children().length : index; selectableLi.insertAt(index, that.$selectableUl); selectedLi.insertAt(index, that.$selectionUl); } }, 'addOption' : function(options){ var that = this; if (options.value !== undefined && options.value !== null){ options = [options]; } $.each(options, function(index, option){ if (option.value !== undefined && option.value !== null && that.$element.find("option[value='"+option.value+"']").length === 0){ var $option = $('<option value="'+option.value+'">'+option.text+'</option>'), $container = option.nested === undefined ? that.$element : $("optgroup[label='"+option.nested+"']"), index = parseInt((typeof option.index === 'undefined' ? $container.children().length : option.index)); if (option.optionClass) { $option.addClass(option.optionClass); } if (option.disabled) { $option.prop('disabled', true); } $option.insertAt(index, $container); that.generateLisFromOption($option.get(0), index, option.nested); } }); }, 'escapeHTML' : function(text){ return $("<div>").text(text).html(); }, 'activeKeyboard' : function($list){ var that = this; $list.on('focus', function(){ $(this).addClass('ms-focus'); }) .on('blur', function(){ $(this).removeClass('ms-focus'); }) .on('keydown', function(e){ switch (e.which) { case 40: case 38: e.preventDefault(); e.stopPropagation(); that.moveHighlight($(this), (e.which === 38) ? -1 : 1); return; case 37: case 39: e.preventDefault(); e.stopPropagation(); that.switchList($list); return; case 9: if(that.$element.is('[tabindex]')){ e.preventDefault(); var tabindex = parseInt(that.$element.attr('tabindex'), 10); tabindex = (e.shiftKey) ? tabindex-1 : tabindex+1; $('[tabindex="'+(tabindex)+'"]').focus(); return; }else{ if(e.shiftKey){ that.$element.trigger('focus'); } } } if($.inArray(e.which, that.options.keySelect) > -1){ e.preventDefault(); e.stopPropagation(); that.selectHighlighted($list); return; } }); }, 'moveHighlight': function($list, direction){ var $elems = $list.find(this.elemsSelector), $currElem = $elems.filter('.ms-hover'), $nextElem = null, elemHeight = $elems.first().outerHeight(), containerHeight = $list.height(), containerSelector = '#'+this.$container.prop('id'); $elems.removeClass('ms-hover'); if (direction === 1){ // DOWN $nextElem = $currElem.nextAll(this.elemsSelector).first(); if ($nextElem.length === 0){ var $optgroupUl = $currElem.parent(); if ($optgroupUl.hasClass('ms-optgroup')){ var $optgroupLi = $optgroupUl.parent(), $nextOptgroupLi = $optgroupLi.next(':visible'); if ($nextOptgroupLi.length > 0){ $nextElem = $nextOptgroupLi.find(this.elemsSelector).first(); } else { $nextElem = $elems.first(); } } else { $nextElem = $elems.first(); } } } else if (direction === -1){ // UP $nextElem = $currElem.prevAll(this.elemsSelector).first(); if ($nextElem.length === 0){ var $optgroupUl = $currElem.parent(); if ($optgroupUl.hasClass('ms-optgroup')){ var $optgroupLi = $optgroupUl.parent(), $prevOptgroupLi = $optgroupLi.prev(':visible'); if ($prevOptgroupLi.length > 0){ $nextElem = $prevOptgroupLi.find(this.elemsSelector).last(); } else { $nextElem = $elems.last(); } } else { $nextElem = $elems.last(); } } } if ($nextElem.length > 0){ $nextElem.addClass('ms-hover'); var scrollTo = $list.scrollTop() + $nextElem.position().top - containerHeight / 2 + elemHeight / 2; $list.scrollTop(scrollTo); } }, 'selectHighlighted' : function($list){ var $elems = $list.find(this.elemsSelector), $highlightedElem = $elems.filter('.ms-hover').first(); if ($highlightedElem.length > 0){ if ($list.parent().hasClass('ms-selectable')){ this.select($highlightedElem.data('ms-value')); } else { this.deselect($highlightedElem.data('ms-value')); } $elems.removeClass('ms-hover'); } }, 'switchList' : function($list){ $list.blur(); this.$container.find(this.elemsSelector).removeClass('ms-hover'); if ($list.parent().hasClass('ms-selectable')){ this.$selectionUl.focus(); } else { this.$selectableUl.focus(); } }, 'activeMouse' : function($list){ var that = this; this.$container.on('mouseenter', that.elemsSelector, function(){ $(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover'); $(this).addClass('ms-hover'); }); this.$container.on('mouseleave', that.elemsSelector, function () { $(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover'); }); }, 'refresh' : function() { this.destroy(); this.$element.multiSelect(this.options); }, 'destroy' : function(){ $("#ms-"+this.$element.attr("id")).remove(); this.$element.off('focus'); this.$element.css('position', '').css('left', ''); this.$element.removeData('multiselect'); }, 'select' : function(value, method){ if (typeof value === 'string'){ value = [value]; } var that = this, ms = this.$element, msIds = $.map(value, function(val){ return(that.sanitize(val)); }), selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable').filter(':not(.'+that.options.disabledClass+')'), selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection').filter(':not(.'+that.options.disabledClass+')'), options = ms.find('option:not(:disabled)').filter(function(){ return($.inArray(this.value, value) > -1); }); if (method === 'init'){ selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'), selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection'); } if (selectables.length > 0){ selectables.addClass('ms-selected').hide(); selections.addClass('ms-selected').show(); options.attr('selected', 'selected'); that.$container.find(that.elemsSelector).removeClass('ms-hover'); var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container'); if (selectableOptgroups.length > 0){ selectableOptgroups.each(function(){ var selectablesLi = $(this).find('.ms-elem-selectable'); if (selectablesLi.length === selectablesLi.filter('.ms-selected').length){ $(this).find('.ms-optgroup-label').hide(); } }); var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container'); selectionOptgroups.each(function(){ var selectionsLi = $(this).find('.ms-elem-selection'); if (selectionsLi.filter('.ms-selected').length > 0){ $(this).find('.ms-optgroup-label').show(); } }); } else { if (that.options.keepOrder && method !== 'init'){ var selectionLiLast = that.$selectionUl.find('.ms-selected'); if((selectionLiLast.length > 1) && (selectionLiLast.last().get(0) != selections.get(0))) { selections.insertAfter(selectionLiLast.last()); } } } if (method !== 'init'){ ms.trigger('change'); if (typeof that.options.afterSelect === 'function') { that.options.afterSelect.call(this, value); } } } }, 'deselect' : function(value){ if (typeof value === 'string'){ value = [value]; } var that = this, ms = this.$element, msIds = $.map(value, function(val){ return(that.sanitize(val)); }), selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #')+'-selectable'), selections = this.$selectionUl.find('#' + msIds.join('-selection, #')+'-selection').filter('.ms-selected').filter(':not(.'+that.options.disabledClass+')'), options = ms.find('option').filter(function(){ return($.inArray(this.value, value) > -1); }); if (selections.length > 0){ selectables.removeClass('ms-selected').show(); selections.removeClass('ms-selected').hide(); options.removeAttr('selected'); that.$container.find(that.elemsSelector).removeClass('ms-hover'); var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container'); if (selectableOptgroups.length > 0){ selectableOptgroups.each(function(){ var selectablesLi = $(this).find('.ms-elem-selectable'); if (selectablesLi.filter(':not(.ms-selected)').length > 0){ $(this).find('.ms-optgroup-label').show(); } }); var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container'); selectionOptgroups.each(function(){ var selectionsLi = $(this).find('.ms-elem-selection'); if (selectionsLi.filter('.ms-selected').length === 0){ $(this).find('.ms-optgroup-label').hide(); } }); } ms.trigger('change'); if (typeof that.options.afterDeselect === 'function') { that.options.afterDeselect.call(this, value); } } }, 'select_all' : function(){ var ms = this.$element, values = ms.val(); ms.find('option:not(":disabled")').attr('selected', 'selected'); this.$selectableUl.find('.ms-elem-selectable').filter(':not(.'+this.options.disabledClass+')').addClass('ms-selected').hide(); this.$selectionUl.find('.ms-optgroup-label').show(); this.$selectableUl.find('.ms-optgroup-label').hide(); this.$selectionUl.find('.ms-elem-selection').filter(':not(.'+this.options.disabledClass+')').addClass('ms-selected').show(); this.$selectionUl.focus(); ms.trigger('change'); if (typeof this.options.afterSelect === 'function') { var selectedValues = $.grep(ms.val(), function(item){ return $.inArray(item, values) < 0; }); this.options.afterSelect.call(this, selectedValues); } }, 'get_selected' : function () { return this.$element.val(); }, 'deselect_all' : function(){ var ms = this.$element, values = ms.val(); ms.find('option').removeAttr('selected'); this.$selectableUl.find('.ms-elem-selectable').removeClass('ms-selected').show(); this.$selectionUl.find('.ms-optgroup-label').hide(); this.$selectableUl.find('.ms-optgroup-label').show(); this.$selectionUl.find('.ms-elem-selection').removeClass('ms-selected').hide(); this.$selectableUl.focus(); ms.trigger('change'); if (typeof this.options.afterDeselect === 'function') { this.options.afterDeselect.call(this, values); } }, sanitize: function(value){ var hash = 0, i, character; if (value.length == 0) return hash; var ls = 0; for (i = 0, ls = value.length; i < ls; i++) { character = value.charCodeAt(i); hash = ((hash<<5)-hash)+character; hash |= 0; // Convert to 32bit integer } return hash; } }; /* MULTISELECT PLUGIN DEFINITION * ======================= */ $.fn.multiSelect = function () { var option = arguments[0], args = arguments; return this.each(function () { var $this = $(this), data = $this.data('multiselect'), options = $.extend({}, $.fn.multiSelect.defaults, $this.data(), typeof option === 'object' && option); if (!data){ $this.data('multiselect', (data = new MultiSelect(this, options))); } if (typeof option === 'string'){ data[option](args[1]); } else { data.init(); } }); }; $.fn.multiSelect.defaults = { keySelect: [32], selectableOptgroup: false, disabledClass : 'disabled', dblClick : false, keepOrder: false, cssClass: '' }; $.fn.multiSelect.Constructor = MultiSelect; $.fn.insertAt = function(index, $parent) { return this.each(function() { if (index === 0) { $parent.prepend(this); } else { $parent.children().eq(index - 1).after(this); } }); }; }(window.jQuery); $('#my-select').multiSelect(); $('#test_button').click(function(){ console.log($('#my-select').multiSelect('get_selected')); return false; });

 .ms-container{ background: transparent url('../img/switch.png') no-repeat 50% 50%; width: 370px; } .ms-container:after{ content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; } .ms-container .ms-selectable, .ms-container .ms-selection{ background: #fff; color: #555555; float: left; width: 45%; } .ms-container .ms-selection{ float: right; } .ms-container .ms-list{ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; height: 200px; padding: 0; overflow-y: auto; } .ms-container .ms-list.ms-focus{ border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9; } .ms-container ul{ margin: 0; list-style-type: none; padding: 0; } .ms-container .ms-optgroup-container{ width: 100%; } .ms-container .ms-optgroup-label{ margin: 0; padding: 5px 0px 0px 5px; cursor: pointer; color: #999; } .ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection{ border-bottom: 1px #eee solid; padding: 2px 10px; color: #555; font-size: 14px; } .ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover{ cursor: pointer; color: #fff; text-decoration: none; background-color: #08c; } .ms-container .ms-selectable li.disabled, .ms-container .ms-selection li.disabled{ background-color: #eee; color: #aaa; cursor: text; }

 <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> <select multiple="multiple" id="my-select" name="my-select[]"> <option value='elem_1'>elem 1</option> <option value='elem_2'>elem 2</option> <option value='elem_3'>elem 3</option> <option value='elem_4'>elem 4</option> <option value='elem_100'>elem 100</option> </select> <button id="test_button"> test </button> </body> </html>

If you add all the code from selector.js, it will be clearer and maybe I can help you
The remaining functions are like select_all , deselect_all , etc.
at the moment I see that you are not calling the get_selected function get_selected all.
@Grundy This is a loudev.com/#usage library that I redid a bit for myself.
You can take it as a source and add the code that I brought in the question to it.
I just need to make the method return values, not a selector.

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2019-01-30T14:39:28

In this case, this is the standard behavior of the jQuery plugin: when it is called, the jQuery object is returned so that you can continue the chain of working with it.

The following line is responsible for this: return this.each(function () { in the $.fn.multiSelect = function () { , since each performs a callback for each element of the collection and returns the entire original collection.

To solve this, you can try to post the plug-in initialization and a call to specific properties.

Either directly receive objects of the plugin class, they are stored in data and execute properties specifically on them, for example:

 $('#my-select').data('multiselect').get_selected()

Working example:

 /* * MultiSelect v0.9.12 * Copyright (c) 2012 Louis Cuny * * This program is free software. It comes without any warranty, to * the extent permitted by applicable law. You can redistribute it * and/or modify it under the terms of the Do What The Fuck You Want * To Public License, Version 2, as published by Sam Hocevar. See * http://sam.zoy.org/wtfpl/COPYING for more details. */ ! function($) { "use strict"; /* MULTISELECT CLASS DEFINITION * ====================== */ var MultiSelect = function(element, options) { this.options = options; this.$element = $(element); this.$container = $('<div/>', { 'class': "ms-container" }); this.$selectableContainer = $('<div/>', { 'class': 'ms-selectable' }); this.$selectionContainer = $('<div/>', { 'class': 'ms-selection' }); this.$selectableUl = $('<ul/>', { 'class': "ms-list", 'tabindex': '-1' }); this.$selectionUl = $('<ul/>', { 'class': "ms-list", 'tabindex': '-1' }); this.scrollTo = 0; this.elemsSelector = 'li:visible:not(.ms-optgroup-label,.ms-optgroup-container,.' + options.disabledClass + ')'; }; MultiSelect.prototype = { constructor: MultiSelect, init: function() { var that = this, ms = this.$element; if (ms.next('.ms-container').length === 0) { ms.css({ position: 'absolute', left: '-9999px' }); ms.attr('id', ms.attr('id') ? ms.attr('id') : Math.ceil(Math.random() * 1000) + 'multiselect'); this.$container.attr('id', 'ms-' + ms.attr('id')); this.$container.addClass(that.options.cssClass); ms.find('option').each(function() { that.generateLisFromOption(this); }); this.$selectionUl.find('.ms-optgroup-label').hide(); if (that.options.selectableHeader) { that.$selectableContainer.append(that.options.selectableHeader); } that.$selectableContainer.append(that.$selectableUl); if (that.options.selectableFooter) { that.$selectableContainer.append(that.options.selectableFooter); } if (that.options.selectionHeader) { that.$selectionContainer.append(that.options.selectionHeader); } that.$selectionContainer.append(that.$selectionUl); if (that.options.selectionFooter) { that.$selectionContainer.append(that.options.selectionFooter); } that.$container.append(that.$selectableContainer); that.$container.append(that.$selectionContainer); ms.after(that.$container); that.activeMouse(that.$selectableUl); that.activeKeyboard(that.$selectableUl); var action = that.options.dblClick ? 'dblclick' : 'click'; that.$selectableUl.on(action, '.ms-elem-selectable', function() { that.select($(this).data('ms-value')); }); that.$selectionUl.on(action, '.ms-elem-selection', function() { that.deselect($(this).data('ms-value')); }); that.activeMouse(that.$selectionUl); that.activeKeyboard(that.$selectionUl); ms.on('focus', function() { that.$selectableUl.focus(); }); } var selectedValues = ms.find('option:selected').map(function() { return $(this).val(); }).get(); that.select(selectedValues, 'init'); if (typeof that.options.afterInit === 'function') { that.options.afterInit.call(this, this.$container); } }, 'generateLisFromOption': function(option, index, $container) { var that = this, ms = that.$element, attributes = "", $option = $(option); for (var cpt = 0; cpt < option.attributes.length; cpt++) { var attr = option.attributes[cpt]; if (attr.name !== 'value' && attr.name !== 'disabled') { attributes += attr.name + '="' + attr.value + '" '; } } var selectableLi = $('<li ' + attributes + '><span>' + that.escapeHTML($option.text()) + '</span></li>'), selectedLi = selectableLi.clone(), value = $option.val(), elementId = that.sanitize(value); selectableLi .data('ms-value', value) .addClass('ms-elem-selectable') .attr('id', elementId + '-selectable'); selectedLi .data('ms-value', value) .addClass('ms-elem-selection') .attr('id', elementId + '-selection') .hide(); if ($option.attr('disabled') || ms.attr('disabled')) { selectedLi.addClass(that.options.disabledClass); selectableLi.addClass(that.options.disabledClass); } var $optgroup = $option.parent('optgroup'); if ($optgroup.length > 0) { var optgroupLabel = $optgroup.attr('label'), optgroupId = that.sanitize(optgroupLabel), $selectableOptgroup = that.$selectableUl.find('#optgroup-selectable-' + optgroupId), $selectionOptgroup = that.$selectionUl.find('#optgroup-selection-' + optgroupId); if ($selectableOptgroup.length === 0) { var optgroupContainerTpl = '<li class="ms-optgroup-container"></li>', optgroupTpl = '<ul class="ms-optgroup"><li class="ms-optgroup-label"><span>' + optgroupLabel + '</span></li></ul>'; $selectableOptgroup = $(optgroupContainerTpl); $selectionOptgroup = $(optgroupContainerTpl); $selectableOptgroup.attr('id', 'optgroup-selectable-' + optgroupId); $selectionOptgroup.attr('id', 'optgroup-selection-' + optgroupId); $selectableOptgroup.append($(optgroupTpl)); $selectionOptgroup.append($(optgroupTpl)); if (that.options.selectableOptgroup) { $selectableOptgroup.find('.ms-optgroup-label').on('click', function() { var values = $optgroup.children(':not(:selected, :disabled)').map(function() { return $(this).val(); }).get(); that.select(values); }); $selectionOptgroup.find('.ms-optgroup-label').on('click', function() { var values = $optgroup.children(':selected:not(:disabled)').map(function() { return $(this).val(); }).get(); that.deselect(values); }); } that.$selectableUl.append($selectableOptgroup); that.$selectionUl.append($selectionOptgroup); } index = index === undefined ? $selectableOptgroup.find('ul').children().length : index + 1; selectableLi.insertAt(index, $selectableOptgroup.children()); selectedLi.insertAt(index, $selectionOptgroup.children()); } else { index = index === undefined ? that.$selectableUl.children().length : index; selectableLi.insertAt(index, that.$selectableUl); selectedLi.insertAt(index, that.$selectionUl); } }, 'addOption': function(options) { var that = this; if (options.value !== undefined && options.value !== null) { options = [options]; } $.each(options, function(index, option) { if (option.value !== undefined && option.value !== null && that.$element.find("option[value='" + option.value + "']").length === 0) { var $option = $('<option value="' + option.value + '">' + option.text + '</option>'), $container = option.nested === undefined ? that.$element : $("optgroup[label='" + option.nested + "']"), index = parseInt((typeof option.index === 'undefined' ? $container.children().length : option.index)); if (option.optionClass) { $option.addClass(option.optionClass); } if (option.disabled) { $option.prop('disabled', true); } $option.insertAt(index, $container); that.generateLisFromOption($option.get(0), index, option.nested); } }); }, 'escapeHTML': function(text) { return $("<div>").text(text).html(); }, 'activeKeyboard': function($list) { var that = this; $list.on('focus', function() { $(this).addClass('ms-focus'); }) .on('blur', function() { $(this).removeClass('ms-focus'); }) .on('keydown', function(e) { switch (e.which) { case 40: case 38: e.preventDefault(); e.stopPropagation(); that.moveHighlight($(this), (e.which === 38) ? -1 : 1); return; case 37: case 39: e.preventDefault(); e.stopPropagation(); that.switchList($list); return; case 9: if (that.$element.is('[tabindex]')) { e.preventDefault(); var tabindex = parseInt(that.$element.attr('tabindex'), 10); tabindex = (e.shiftKey) ? tabindex - 1 : tabindex + 1; $('[tabindex="' + (tabindex) + '"]').focus(); return; } else { if (e.shiftKey) { that.$element.trigger('focus'); } } } if ($.inArray(e.which, that.options.keySelect) > -1) { e.preventDefault(); e.stopPropagation(); that.selectHighlighted($list); return; } }); }, 'moveHighlight': function($list, direction) { var $elems = $list.find(this.elemsSelector), $currElem = $elems.filter('.ms-hover'), $nextElem = null, elemHeight = $elems.first().outerHeight(), containerHeight = $list.height(), containerSelector = '#' + this.$container.prop('id'); $elems.removeClass('ms-hover'); if (direction === 1) { // DOWN $nextElem = $currElem.nextAll(this.elemsSelector).first(); if ($nextElem.length === 0) { var $optgroupUl = $currElem.parent(); if ($optgroupUl.hasClass('ms-optgroup')) { var $optgroupLi = $optgroupUl.parent(), $nextOptgroupLi = $optgroupLi.next(':visible'); if ($nextOptgroupLi.length > 0) { $nextElem = $nextOptgroupLi.find(this.elemsSelector).first(); } else { $nextElem = $elems.first(); } } else { $nextElem = $elems.first(); } } } else if (direction === -1) { // UP $nextElem = $currElem.prevAll(this.elemsSelector).first(); if ($nextElem.length === 0) { var $optgroupUl = $currElem.parent(); if ($optgroupUl.hasClass('ms-optgroup')) { var $optgroupLi = $optgroupUl.parent(), $prevOptgroupLi = $optgroupLi.prev(':visible'); if ($prevOptgroupLi.length > 0) { $nextElem = $prevOptgroupLi.find(this.elemsSelector).last(); } else { $nextElem = $elems.last(); } } else { $nextElem = $elems.last(); } } } if ($nextElem.length > 0) { $nextElem.addClass('ms-hover'); var scrollTo = $list.scrollTop() + $nextElem.position().top - containerHeight / 2 + elemHeight / 2; $list.scrollTop(scrollTo); } }, 'selectHighlighted': function($list) { var $elems = $list.find(this.elemsSelector), $highlightedElem = $elems.filter('.ms-hover').first(); if ($highlightedElem.length > 0) { if ($list.parent().hasClass('ms-selectable')) { this.select($highlightedElem.data('ms-value')); } else { this.deselect($highlightedElem.data('ms-value')); } $elems.removeClass('ms-hover'); } }, 'switchList': function($list) { $list.blur(); this.$container.find(this.elemsSelector).removeClass('ms-hover'); if ($list.parent().hasClass('ms-selectable')) { this.$selectionUl.focus(); } else { this.$selectableUl.focus(); } }, 'activeMouse': function($list) { var that = this; this.$container.on('mouseenter', that.elemsSelector, function() { $(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover'); $(this).addClass('ms-hover'); }); this.$container.on('mouseleave', that.elemsSelector, function() { $(this).parents('.ms-container').find(that.elemsSelector).removeClass('ms-hover'); }); }, 'refresh': function() { this.destroy(); this.$element.multiSelect(this.options); }, 'destroy': function() { $("#ms-" + this.$element.attr("id")).remove(); this.$element.off('focus'); this.$element.css('position', '').css('left', ''); this.$element.removeData('multiselect'); }, 'select': function(value, method) { if (typeof value === 'string') { value = [value]; } var that = this, ms = this.$element, msIds = $.map(value, function(val) { return (that.sanitize(val)); }), selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #') + '-selectable').filter(':not(.' + that.options.disabledClass + ')'), selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection').filter(':not(.' + that.options.disabledClass + ')'), options = ms.find('option:not(:disabled)').filter(function() { return ($.inArray(this.value, value) > -1); }); if (method === 'init') { selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #') + '-selectable'), selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection'); } if (selectables.length > 0) { selectables.addClass('ms-selected').hide(); selections.addClass('ms-selected').show(); options.attr('selected', 'selected'); that.$container.find(that.elemsSelector).removeClass('ms-hover'); var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container'); if (selectableOptgroups.length > 0) { selectableOptgroups.each(function() { var selectablesLi = $(this).find('.ms-elem-selectable'); if (selectablesLi.length === selectablesLi.filter('.ms-selected').length) { $(this).find('.ms-optgroup-label').hide(); } }); var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container'); selectionOptgroups.each(function() { var selectionsLi = $(this).find('.ms-elem-selection'); if (selectionsLi.filter('.ms-selected').length > 0) { $(this).find('.ms-optgroup-label').show(); } }); } else { if (that.options.keepOrder && method !== 'init') { var selectionLiLast = that.$selectionUl.find('.ms-selected'); if ((selectionLiLast.length > 1) && (selectionLiLast.last().get(0) != selections.get(0))) { selections.insertAfter(selectionLiLast.last()); } } } if (method !== 'init') { ms.trigger('change'); if (typeof that.options.afterSelect === 'function') { that.options.afterSelect.call(this, value); } } } }, 'deselect': function(value) { if (typeof value === 'string') { value = [value]; } var that = this, ms = this.$element, msIds = $.map(value, function(val) { return (that.sanitize(val)); }), selectables = this.$selectableUl.find('#' + msIds.join('-selectable, #') + '-selectable'), selections = this.$selectionUl.find('#' + msIds.join('-selection, #') + '-selection').filter('.ms-selected').filter(':not(.' + that.options.disabledClass + ')'), options = ms.find('option').filter(function() { return ($.inArray(this.value, value) > -1); }); if (selections.length > 0) { selectables.removeClass('ms-selected').show(); selections.removeClass('ms-selected').hide(); options.removeAttr('selected'); that.$container.find(that.elemsSelector).removeClass('ms-hover'); var selectableOptgroups = that.$selectableUl.children('.ms-optgroup-container'); if (selectableOptgroups.length > 0) { selectableOptgroups.each(function() { var selectablesLi = $(this).find('.ms-elem-selectable'); if (selectablesLi.filter(':not(.ms-selected)').length > 0) { $(this).find('.ms-optgroup-label').show(); } }); var selectionOptgroups = that.$selectionUl.children('.ms-optgroup-container'); selectionOptgroups.each(function() { var selectionsLi = $(this).find('.ms-elem-selection'); if (selectionsLi.filter('.ms-selected').length === 0) { $(this).find('.ms-optgroup-label').hide(); } }); } ms.trigger('change'); if (typeof that.options.afterDeselect === 'function') { that.options.afterDeselect.call(this, value); } } }, 'select_all': function() { var ms = this.$element, values = ms.val(); ms.find('option:not(":disabled")').attr('selected', 'selected'); this.$selectableUl.find('.ms-elem-selectable').filter(':not(.' + this.options.disabledClass + ')').addClass('ms-selected').hide(); this.$selectionUl.find('.ms-optgroup-label').show(); this.$selectableUl.find('.ms-optgroup-label').hide(); this.$selectionUl.find('.ms-elem-selection').filter(':not(.' + this.options.disabledClass + ')').addClass('ms-selected').show(); this.$selectionUl.focus(); ms.trigger('change'); if (typeof this.options.afterSelect === 'function') { var selectedValues = $.grep(ms.val(), function(item) { return $.inArray(item, values) < 0; }); this.options.afterSelect.call(this, selectedValues); } }, 'get_selected': function() { return this.$element.val(); }, 'deselect_all': function() { var ms = this.$element, values = ms.val(); ms.find('option').removeAttr('selected'); this.$selectableUl.find('.ms-elem-selectable').removeClass('ms-selected').show(); this.$selectionUl.find('.ms-optgroup-label').hide(); this.$selectableUl.find('.ms-optgroup-label').show(); this.$selectionUl.find('.ms-elem-selection').removeClass('ms-selected').hide(); this.$selectableUl.focus(); ms.trigger('change'); if (typeof this.options.afterDeselect === 'function') { this.options.afterDeselect.call(this, values); } }, sanitize: function(value) { var hash = 0, i, character; if (value.length == 0) return hash; var ls = 0; for (i = 0, ls = value.length; i < ls; i++) { character = value.charCodeAt(i); hash = ((hash << 5) - hash) + character; hash |= 0; // Convert to 32bit integer } return hash; } }; /* MULTISELECT PLUGIN DEFINITION * ======================= */ $.fn.multiSelect = function() { var option = arguments[0], args = arguments; return this.each(function() { var $this = $(this), data = $this.data('multiselect'), options = $.extend({}, $.fn.multiSelect.defaults, $this.data(), typeof option === 'object' && option); if (!data) { $this.data('multiselect', (data = new MultiSelect(this, options))); } if (typeof option === 'string') { data[option](args[1]); } else { data.init(); } }); }; $.fn.multiSelect.defaults = { keySelect: [32], selectableOptgroup: false, disabledClass: 'disabled', dblClick: false, keepOrder: false, cssClass: '' }; $.fn.multiSelect.Constructor = MultiSelect; $.fn.insertAt = function(index, $parent) { return this.each(function() { if (index === 0) { $parent.prepend(this); } else { $parent.children().eq(index - 1).after(this); } }); }; }(window.jQuery); $('#my-select').multiSelect(); $('#test_button').click(function() { console.log($('#my-select').data('multiselect').get_selected()); return false; });

 .ms-container { background: transparent url('../img/switch.png') no-repeat 50% 50%; width: 370px; } .ms-container:after { content: "."; display: block; height: 0; line-height: 0; font-size: 0; clear: both; min-height: 0; visibility: hidden; } .ms-container .ms-selectable, .ms-container .ms-selection { background: #fff; color: #555555; float: left; width: 45%; } .ms-container .ms-selection { float: right; } .ms-container .ms-list { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; border: 1px solid #ccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; position: relative; height: 200px; padding: 0; overflow-y: auto; } .ms-container .ms-list.ms-focus { border-color: rgba(82, 168, 236, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9; } .ms-container ul { margin: 0; list-style-type: none; padding: 0; } .ms-container .ms-optgroup-container { width: 100%; } .ms-container .ms-optgroup-label { margin: 0; padding: 5px 0px 0px 5px; cursor: pointer; color: #999; } .ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection { border-bottom: 1px #eee solid; padding: 2px 10px; color: #555; font-size: 14px; } .ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover { cursor: pointer; color: #fff; text-decoration: none; background-color: #08c; } .ms-container .ms-selectable li.disabled, .ms-container .ms-selection li.disabled { background-color: #eee; color: #aaa; cursor: text; }

 <html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> <select multiple="multiple" id="my-select" name="my-select[]"> <option value='elem_1'>elem 1</option> <option value='elem_2'>elem 2</option> <option value='elem_3'>elem 3</option> <option value='elem_4'>elem 4</option> <option value='elem_100'>elem 100</option> </select> <button id="test_button"> test </button> </body> </html>

А можно пример вот этого: "Для решения, можно попробовать разнести инициализацию плагина и вызов конкретных свойств."? Я не силен в Javascript. Если пример не будет очень большим.
@Axenow, в двух словах: проверить с чем вызвали плагин и если это вызов метода - не запускать each

jquery .val () returns w.fn.init [select # test.searchable]

1 answer 1

More articles: