Bootstrap可多选、搜索的下拉列表

冷不防 2022-08-09 18:48 598阅读 0赞

示例图：

可搜索
可搜索

区分大小写搜索

区分大小写搜索

需要引用bootstrap文件，核心文件：bootstrap-multiselect.css、bootstrap-multiselect.js

bootstrap-multiselect.css

  1. .multiselect-container{ position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{ margin:5px}.multiselect-container>li{ padding:0}.multiselect-container>li>a.multiselect-all label{ font-weight:bold}.multiselect-container>li>label.multiselect-group{ margin:0;padding:3px 20px 3px 20px;height:100%;font-weight:bold}.multiselect-container>li>a>label{ margin:0;height:100%;cursor:pointer;font-weight:normal}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{ margin:0}.multiselect-container>li>a>label>input[type="checkbox"]{ margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{ border-top-left-radius:4px;border-bottom-left-radius:4px}

bootstrap-multiselect.js

  1. /** * Bootstrap Multiselect (https://github.com/davidstutz/bootstrap-multiselect) * * Apache License, Version 2.0: * Copyright (c) 2012 - 2015 David Stutz * * Licensed under the Apache License, Version 2.0 (the "License"); you may not * use this file except in compliance with the License. You may obtain a * copy of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the * License for the specific language governing permissions and limitations * under the License. * * BSD 3-Clause License: * Copyright (c) 2012 - 2015 David Stutz * All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * - Redistributions of source code must retain the above copyright notice, * this list of conditions and the following disclaimer. * - Redistributions in binary form must reproduce the above copyright notice, * this list of conditions and the following disclaimer in the documentation * and/or other materials provided with the distribution. * - Neither the name of David Stutz nor the names of its contributors may be * used to endorse or promote products derived from this software without * specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR * OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF * ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 为什么使用这个js：全选后可以反选 */
  2. !function ($) {
  3.     "use strict";// jshint ;_;
  5.     if (typeof ko !== 'undefined' && ko.bindingHandlers && !ko.bindingHandlers.multiselect) {
  6.         ko.bindingHandlers.multiselect = {
  7.             after: ['options', 'value', 'selectedOptions'],
  9.             init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
  10.                 var $element = $(element);
  11.                 var config = ko.toJS(valueAccessor());
  13.                 $element.multiselect(config);
  15.                 if (allBindings.has('options')) {
  16.                     var options = allBindings.get('options');
  17.                     if (ko.isObservable(options)) {
  18.                         ko.computed({
  19.                             read: function () {
  20.                                 options();
  21.                                 setTimeout(function () {
  22.                                     var ms = $element.data('multiselect');
  23.                                     if (ms)
  24.                                         ms.updateOriginalOptions();//Not sure how beneficial this is.
  25.                                     $element.multiselect('rebuild');
  26.                                 }, 1);
  27.                             },
  28.                             disposeWhenNodeIsRemoved: element
  29.                         });
  30.                     }
  31.                 }
  33.                 //value and selectedOptions are two-way, so these will be triggered even by our own actions.
  34.                 //It needs some way to tell if they are triggered because of us or because of outside change.
  35.                 //It doesn't loop but it's a waste of processing.
  36.                 if (allBindings.has('value')) {
  37.                     var value = allBindings.get('value');
  38.                     if (ko.isObservable(value)) {
  39.                         ko.computed({
  40.                             read: function () {
  41.                                 value();
  42.                                 setTimeout(function () {
  43.                                     $element.multiselect('refresh');
  44.                                 }, 1);
  45.                             },
  46.                             disposeWhenNodeIsRemoved: element
  47.                         }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
  48.                     }
  49.                 }
  51.                 //Switched from arrayChange subscription to general subscription using 'refresh'.
  52.                 //Not sure performance is any better using 'select' and 'deselect'.
  53.                 if (allBindings.has('selectedOptions')) {
  54.                     var selectedOptions = allBindings.get('selectedOptions');
  55.                     if (ko.isObservable(selectedOptions)) {
  56.                         ko.computed({
  57.                             read: function () {
  58.                                 selectedOptions();
  59.                                 setTimeout(function () {
  60.                                     $element.multiselect('refresh');
  61.                                 }, 1);
  62.                             },
  63.                             disposeWhenNodeIsRemoved: element
  64.                         }).extend({ rateLimit: 100, notifyWhenChangesStop: true });
  65.                     }
  66.                 }
  68.                 ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
  69.                     $element.multiselect('destroy');
  70.                 });
  71.             },
  73.             update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
  74.                 var $element = $(element);
  75.                 var config = ko.toJS(valueAccessor());
  77.                 $element.multiselect('setOptions', config);
  78.                 $element.multiselect('rebuild');
  79.             }
  80.         };
  81.     }
  83.     function forEach(array, callback) {
  84.         for (var index = 0; index < array.length; ++index) {
  85.             callback(array[index], index);
  86.         }
  87.     }
  89.     /** * Constructor to create a new multiselect using the given select. * * @param {jQuery} select * @param {Object} options * @returns {Multiselect} */
  90.     function Multiselect(select, options) {
  92.         this.$select = $(select);
  93.         this.options = this.mergeOptions($.extend({}, options, this.$select.data()));
  95.         // Initialization.
  96.         // We have to clone to create a new reference.
  97.         this.originalOptions = this.$select.clone()[0].options;
  98.         this.query = '';
  99.         this.searchTimeout = null;
  100.         this.lastToggledInput = null
  102.         this.options.multiple = this.$select.attr('multiple') === "multiple";
  103.         this.options.onChange = $.proxy(this.options.onChange, this);
  104.         this.options.onDropdownShow = $.proxy(this.options.onDropdownShow, this);
  105.         this.options.onDropdownHide = $.proxy(this.options.onDropdownHide, this);
  106.         this.options.onDropdownShown = $.proxy(this.options.onDropdownShown, this);
  107.         this.options.onDropdownHidden = $.proxy(this.options.onDropdownHidden, this);
  109.         // Build select all if enabled.
  110.         this.buildContainer();
  111.         this.buildButton();
  112.         this.buildDropdown();
  113.         this.buildSelectAll();
  114.         this.buildDropdownOptions();
  115.         this.buildFilter();
  117.         this.updateButtonText();
  118.         this.updateSelectAll();
  120.         if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
  121.             this.disable();
  122.         }
  124.         this.$select.hide().after(this.$container);
  125.     };
  127.     Multiselect.prototype = {
  129.         defaults: {
  130.             /** * Default text function will either print 'None selected' in case no * option is selected or a list of the selected options up to a length * of 3 selected options. * * @param {jQuery} options * @param {jQuery} select * @returns {String} */
  131.             buttonText: function (options, select) {
  132.                 if (options.length === 0) {
  133.                     return this.nonSelectedText;
  134.                 }
  135.                 else if (this.allSelectedText && options.length == $('option', $(select)).length) {
  136.                     if (this.selectAllNumber) {
  137.                         return this.allSelectedText + ' (' + options.length + ')';
  138.                     }
  139.                     else {
  140.                         return this.allSelectedText;
  141.                     }
  142.                 }
  143.                 else if (options.length > this.numberDisplayed) {
  144.                     return options.length + ' ' + this.nSelectedText;
  145.                 }
  146.                 else {
  147.                     var selected = '';
  148.                     options.each(function () {
  149.                         var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
  151.                         selected += label + ', ';
  152.                     });
  154.                     return selected.substr(0, selected.length - 2);
  155.                 }
  156.             },
  157.             /** * Updates the title of the button similar to the buttonText function. * * @param {jQuery} options * @param {jQuery} select * @returns { @exp;selected@call;substr} */
  158.             buttonTitle: function (options, select) {
  159.                 if (options.length === 0) {
  160.                     return this.nonSelectedText;
  161.                 }
  162.                 else {
  163.                     var selected = '';
  164.                     options.each(function () {
  165.                         selected += $(this).text() + ', ';
  166.                     });
  167.                     return selected.substr(0, selected.length - 2);
  168.                 }
  169.             },
  170.             /** * Create a label. * * @param {jQuery} element * @returns {String} */
  171.             optionLabel: function (element) {
  172.                 return $(element).attr('label') || $(element).text();
  173.             },
  174.             /** * Triggered on change of the multiselect. * * Not triggered when selecting/deselecting options manually. * * @param {jQuery} option * @param {Boolean} checked */
  175.             onChange: function (option, checked) {
  177.             },
  178.             /** * Triggered when the dropdown is shown. * * @param {jQuery} event */
  179.             onDropdownShow: function (event) {
  181.             },
  182.             /** * Triggered when the dropdown is hidden. * * @param {jQuery} event */
  183.             onDropdownHide: function (event) {
  185.             },
  186.             /** * Triggered after the dropdown is shown. * * @param {jQuery} event */
  187.             onDropdownShown: function (event) {
  189.             },
  190.             /** * Triggered after the dropdown is hidden. * * @param {jQuery} event */
  191.             onDropdownHidden: function (event) {
  193.             },
  194.             /** * Triggered on select all. */
  195.             onSelectAll: function () {
  197.             },
  198.             enableHTML: false,
  199.             //buttonClass: 'btn btn-default',
  200.             buttonClass: 'btn',
  201.             inheritClass: false,
  202.             buttonWidth: 'auto',
  203.             buttonContainer: '<div class="btn-group" style="width:100%" />',
  204.             dropRight: false,
  205.             selectedClass: 'active',
  206.             // Maximum height of the dropdown menu.
  207.             // If maximum height is exceeded a scrollbar will be displayed.
  208.             maxHeight: false,
  209.             checkboxName: false,
  210.             includeSelectAllOption: false,
  211.             includeSelectAllIfMoreThan: 0,
  212.             selectAllText: ' 全选',
  213.             selectAllValue: 'multiselect-all',
  214.             selectAllName: false,
  215.             selectAllNumber: true,
  216.             enableFiltering: false,
  217.             enableCaseInsensitiveFiltering: false,
  218.             enableClickableOptGroups: false,
  219.             filterPlaceholder: 'Search',
  220.             // possible options: 'text', 'value', 'both'
  221.             filterBehavior: 'text',
  222.             includeFilterClearBtn: true,
  223.             preventInputChangeEvent: false,
  224.             nonSelectedText: '请选择',
  225.             nSelectedText: 'selected',
  226.             allSelectedText: 'All selected',
  227.             numberDisplayed: 3,
  228.             disableIfEmpty: false,
  229.             templates: {
  230.                 button: '<button type="button" class="multiselect dropdown-toggle form-control" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
  231.                 ul: '<ul class="multiselect-container dropdown-menu"></ul>',
  232.                 filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
  233.                 filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-times-circle" ></i></button></span>',
  234.                 li: '<li><a tabindex="0"><label></label></a></li>',
  235.                 divider: '<li class="multiselect-item divider"></li>',
  236.                 liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>'
  237.             }
  238.         },
  240.         constructor: Multiselect,
  242.         /** * Builds the container of the multiselect. */
  243.         buildContainer: function () {
  244.             this.$container = $(this.options.buttonContainer);
  245.             this.$container.on('show.bs.dropdown', this.options.onDropdownShow);
  246.             this.$container.on('hide.bs.dropdown', this.options.onDropdownHide);
  247.             this.$container.on('shown.bs.dropdown', this.options.onDropdownShown);
  248.             this.$container.on('hidden.bs.dropdown', this.options.onDropdownHidden);
  249.         },
  251.         /** * Builds the button of the multiselect. */
  252.         buildButton: function () {
  253.             this.$button = $(this.options.templates.button).addClass(this.options.buttonClass);
  254.             if (this.$select.attr('class') && this.options.inheritClass) {
  255.                 this.$button.addClass(this.$select.attr('class'));
  256.             }
  257.             // Adopt active state.
  258.             if (this.$select.prop('disabled')) {
  259.                 this.disable();
  260.             }
  261.             else {
  262.                 this.enable();
  263.             }
  265.             // Manually add button width if set.
  266.             if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') {
  267.                 this.$button.css({
  268.                     'width': this.options.buttonWidth,
  269.                     'overflow': 'hidden',
  270.                     'text-overflow': 'ellipsis'
  271.                 });
  272.                 this.$container.css({
  273.                     'width': this.options.buttonWidth
  274.                 });
  275.             }
  277.             // Keep the tab index from the select.
  278.             var tabindex = this.$select.attr('tabindex');
  279.             if (tabindex) {
  280.                 this.$button.attr('tabindex', tabindex);
  281.             }
  283.             this.$container.prepend(this.$button);
  284.         },
  286.         /** * Builds the ul representing the dropdown menu. */
  287.         buildDropdown: function () {
  289.             // Build ul.
  290.             this.$ul = $(this.options.templates.ul);
  292.             if (this.options.dropRight) {
  293.                 this.$ul.addClass('pull-right');
  294.             }
  296.             // Set max height of dropdown menu to activate auto scrollbar.
  297.             if (this.options.maxHeight) {
  298.                 // TODO: Add a class for this option to move the css declarations.
  299.                 this.$ul.css({
  300.                     'max-height': this.options.maxHeight + 'px',
  301.                     'overflow-y': 'auto',
  302.                     'overflow-x': 'hidden'
  303.                 });
  304.             }
  306.             this.$container.append(this.$ul);
  307.         },
  309.         /** * Build the dropdown options and binds all nessecary events. * * Uses createDivider and createOptionValue to create the necessary options. */
  310.         buildDropdownOptions: function () {
  312.             this.$select.children().each($.proxy(function (index, element) {
  314.                 var $element = $(element);
  315.                 // Support optgroups and options without a group simultaneously.
  316.                 var tag = $element.prop('tagName')
  317.                     .toLowerCase();
  319.                 if ($element.prop('value') === this.options.selectAllValue) {
  320.                     return;
  321.                 }
  323.                 if (tag === 'optgroup') {
  324.                     this.createOptgroup(element);
  325.                 }
  326.                 else if (tag === 'option') {
  328.                     if ($element.data('role') === 'divider') {
  329.                         this.createDivider();
  330.                     }
  331.                     else {
  332.                         this.createOptionValue(element);
  333.                     }
  335.                 }
  337.                 // Other illegal tags will be ignored.
  338.             }, this));
  340.             // Bind the change event on the dropdown elements.
  341.             $('li input', this.$ul).on('change', $.proxy(function (event) {
  342.                 var $target = $(event.target);
  344.                 var checked = $target.prop('checked') || false;
  345.                 var isSelectAllOption = $target.val() === this.options.selectAllValue;
  347.                 // Apply or unapply the configured selected class.
  348.                 if (this.options.selectedClass) {
  349.                     if (checked) {
  350.                         $target.closest('li')
  351.                             .addClass(this.options.selectedClass);
  352.                     }
  353.                     else {
  354.                         $target.closest('li')
  355.                             .removeClass(this.options.selectedClass);
  356.                     }
  357.                 }
  359.                 // Get the corresponding option.
  360.                 var value = $target.val();
  361.                 var $option = this.getOptionByValue(value);
  363.                 var $optionsNotThis = $('option', this.$select).not($option);
  364.                 var $checkboxesNotThis = $('input', this.$container).not($target);
  366.                 if (isSelectAllOption) {
  367.                     if (checked) {
  368.                         this.selectAll();
  369.                     }
  370.                     else {
  371.                         this.deselectAll();
  372.                     }
  373.                 }
  375.                 if (!isSelectAllOption) {
  376.                     if (checked) {
  377.                         $option.prop('selected', true);
  379.                         if (this.options.multiple) {
  380.                             // Simply select additional option.
  381.                             $option.prop('selected', true);
  382.                         }
  383.                         else {
  384.                             // Unselect all other options and corresponding checkboxes.
  385.                             if (this.options.selectedClass) {
  386.                                 $($checkboxesNotThis).closest('li').removeClass(this.options.selectedClass);
  387.                             }
  389.                             $($checkboxesNotThis).prop('checked', false);
  390.                             $optionsNotThis.prop('selected', false);
  392.                             // It's a single selection, so close.
  393.                             this.$button.click();
  394.                         }
  396.                         if (this.options.selectedClass === "active") {
  397.                             $optionsNotThis.closest("a").css("outline", "");
  398.                         }
  399.                     }
  400.                     else {
  401.                         // Unselect option.
  402.                         $option.prop('selected', false);
  403.                     }
  404.                 }
  406.                 this.$select.change();
  408.                 this.updateButtonText();
  409.                 this.updateSelectAll();
  411.                 this.options.onChange($option, checked);
  413.                 if (this.options.preventInputChangeEvent) {
  414.                     return false;
  415.                 }
  416.             }, this));
  418.             $('li a', this.$ul).on('mousedown', function (e) {
  419.                 if (e.shiftKey) {
  420.                     // Prevent selecting text by Shift+click
  421.                     return false;
  422.                 }
  423.             });
  425.             $('li a', this.$ul).on('touchstart click', $.proxy(function (event) {
  426.                 event.stopPropagation();
  428.                 var $target = $(event.target);
  430.                 if (event.shiftKey && this.options.multiple) {
  431.                     if ($target.is("label")) { // Handles checkbox selection manually (see https://github.com/davidstutz/bootstrap-multiselect/issues/431)
  432.                         event.preventDefault();
  433.                         $target = $target.find("input");
  434.                         $target.prop("checked", !$target.prop("checked"));
  435.                     }
  436.                     var checked = $target.prop('checked') || false;
  438.                     if (this.lastToggledInput !== null && this.lastToggledInput !== $target) { // Make sure we actually have a range
  439.                         var from = $target.closest("li").index();
  440.                         var to = this.lastToggledInput.closest("li").index();
  442.                         if (from > to) { // Swap the indices
  443.                             var tmp = to;
  444.                             to = from;
  445.                             from = tmp;
  446.                         }
  448.                         // Make sure we grab all elements since slice excludes the last index
  449.                         ++to;
  451.                         // Change the checkboxes and underlying options
  452.                         var range = this.$ul.find("li").slice(from, to).find("input");
  454.                         range.prop('checked', checked);
  456.                         if (this.options.selectedClass) {
  457.                             range.closest('li')
  458.                                 .toggleClass(this.options.selectedClass, checked);
  459.                         }
  461.                         for (var i = 0, j = range.length; i < j; i++) {
  462.                             var $checkbox = $(range[i]);
  464.                             var $option = this.getOptionByValue($checkbox.val());
  466.                             $option.prop('selected', checked);
  467.                         }
  468.                     }
  470.                     // Trigger the select "change" event
  471.                     $target.trigger("change");
  472.                 }
  474.                 // Remembers last clicked option
  475.                 if ($target.is("input") && !$target.closest("li").is(".multiselect-item")) {
  476.                     this.lastToggledInput = $target;
  477.                 }
  479.                 $target.blur();
  480.             }, this));
  482.             // Keyboard support.
  483.             this.$container.off('keydown.multiselect').on('keydown.multiselect', $.proxy(function (event) {
  484.                 if ($('input[type="text"]', this.$container).is(':focus')) {
  485.                     return;
  486.                 }
  488.                 if (event.keyCode === 9 && this.$container.hasClass('open')) {
  489.                     this.$button.click();
  490.                 }
  491.                 else {
  492.                     var $items = $(this.$container).find("li:not(.divider):not(.disabled) a").filter(":visible");
  494.                     if (!$items.length) {
  495.                         return;
  496.                     }
  498.                     var index = $items.index($items.filter(':focus'));
  500.                     // Navigation up.
  501.                     if (event.keyCode === 38 && index > 0) {
  502.                         index--;
  503.                     }
  504.                         // Navigate down.
  505.                     else if (event.keyCode === 40 && index < $items.length - 1) {
  506.                         index++;
  507.                     }
  508.                     else if (!~index) {
  509.                         index = 0;
  510.                     }
  512.                     var $current = $items.eq(index);
  513.                     $current.focus();
  515.                     if (event.keyCode === 32 || event.keyCode === 13) {
  516.                         var $checkbox = $current.find('input');
  518.                         $checkbox.prop("checked", !$checkbox.prop("checked"));
  519.                         $checkbox.change();
  520.                     }
  522.                     event.stopPropagation();
  523.                     event.preventDefault();
  524.                 }
  525.             }, this));
  527.             if (this.options.enableClickableOptGroups && this.options.multiple) {
  528.                 $('li.multiselect-group', this.$ul).on('click', $.proxy(function (event) {
  529.                     event.stopPropagation();
  531.                     var group = $(event.target).parent();
  533.                     // Search all option in optgroup
  534.                     var $options = group.nextUntil('li.multiselect-group');
  535.                     var $visibleOptions = $options.filter(":visible:not(.disabled)");
  537.                     // check or uncheck items
  538.                     var allChecked = true;
  539.                     var optionInputs = $visibleOptions.find('input');
  540.                     optionInputs.each(function () {
  541.                         allChecked = allChecked && $(this).prop('checked');
  542.                     });
  544.                     optionInputs.prop('checked', !allChecked).trigger('change');
  545.                 }, this));
  546.             }
  547.         },
  549.         /** * Create an option using the given select option. * * @param {jQuery} element */
  550.         createOptionValue: function (element) {
  551.             var $element = $(element);
  552.             if ($element.is(':selected')) {
  553.                 $element.prop('selected', true);
  554.             }
  556.             // Support the label attribute on options.
  557.             var label = this.options.optionLabel(element);
  558.             var value = $element.val();
  559.             var inputType = this.options.multiple ? "checkbox" : "radio";
  561.             var $li = $(this.options.templates.li);
  562.             var $label = $('label', $li);
  563.             $label.addClass(inputType);
  565.             if (this.options.enableHTML) {
  566.                 $label.html(" " + label);
  567.             }
  568.             else {
  569.                 $label.text(" " + label);
  570.             }
  572.             var $checkbox = $('<input/>').attr('type', inputType);
  574.             if (this.options.checkboxName) {
  575.                 $checkbox.attr('name', this.options.checkboxName);
  576.             }
  577.             $label.prepend($checkbox);
  579.             var selected = $element.prop('selected') || false;
  580.             $checkbox.val(value);
  582.             if (value === this.options.selectAllValue) {
  583.                 $li.addClass("multiselect-item multiselect-all");
  584.                 $checkbox.parent().parent()
  585.                     .addClass('multiselect-all');
  586.             }
  588.             $label.attr('title', $element.attr('title'));
  590.             this.$ul.append($li);
  592.             if ($element.is(':disabled')) {
  593.                 $checkbox.attr('disabled', 'disabled')
  594.                     .prop('disabled', true)
  595.                     .closest('a')
  596.                     .attr("tabindex", "-1")
  597.                     .closest('li')
  598.                     .addClass('disabled');
  599.             }
  601.             $checkbox.prop('checked', selected);
  603.             if (selected && this.options.selectedClass) {
  604.                 $checkbox.closest('li')
  605.                     .addClass(this.options.selectedClass);
  606.             }
  607.         },
  609.         /** * Creates a divider using the given select option. * * @param {jQuery} element */
  610.         createDivider: function (element) {
  611.             var $divider = $(this.options.templates.divider);
  612.             this.$ul.append($divider);
  613.         },
  615.         /** * Creates an optgroup. * * @param {jQuery} group */
  616.         createOptgroup: function (group) {
  617.             var groupName = $(group).prop('label');
  619.             // Add a header for the group.
  620.             var $li = $(this.options.templates.liGroup);
  622.             if (this.options.enableHTML) {
  623.                 $('label', $li).html(groupName);
  624.             }
  625.             else {
  626.                 $('label', $li).text(groupName);
  627.             }
  629.             if (this.options.enableClickableOptGroups) {
  630.                 $li.addClass('multiselect-group-clickable');
  631.             }
  633.             this.$ul.append($li);
  635.             if ($(group).is(':disabled')) {
  636.                 $li.addClass('disabled');
  637.             }
  639.             // Add the options of the group.
  640.             $('option', group).each($.proxy(function (index, element) {
  641.                 this.createOptionValue(element);
  642.             }, this));
  643.         },
  645.         /** * Build the selct all. * * Checks if a select all has already been created. */
  646.         buildSelectAll: function () {
  647.             if (typeof this.options.selectAllValue === 'number') {
  648.                 this.options.selectAllValue = this.options.selectAllValue.toString();
  649.             }
  651.             var alreadyHasSelectAll = this.hasSelectAll();
  653.             if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
  654.                     && $('option', this.$select).length > this.options.includeSelectAllIfMoreThan) {
  656.                 // Check whether to add a divider after the select all.
  657.                 if (this.options.includeSelectAllDivider) {
  658.                     this.$ul.prepend($(this.options.templates.divider));
  659.                 }
  661.                 var $li = $(this.options.templates.li);
  662.                 $('label', $li).addClass("checkbox");
  664.                 if (this.options.enableHTML) {
  665.                     $('label', $li).html(" " + this.options.selectAllText);
  666.                 }
  667.                 else {
  668.                     $('label', $li).text(" " + this.options.selectAllText);
  669.                 }
  671.                 if (this.options.selectAllName) {
  672.                     $('label', $li).prepend('<input type="checkbox" name="' + this.options.selectAllName + '" />');
  673.                 }
  674.                 else {
  675.                     $('label', $li).prepend('<input type="checkbox" />');
  676.                 }
  678.                 var $checkbox = $('input', $li);
  679.                 $checkbox.val(this.options.selectAllValue);
  681.                 $li.addClass("multiselect-item multiselect-all");
  682.                 $checkbox.parent().parent()
  683.                     .addClass('multiselect-all');
  685.                 this.$ul.prepend($li);
  687.                 $checkbox.prop('checked', false);
  688.             }
  689.         },
  691.         /** * Builds the filter. */
  692.         buildFilter: function () {
  694.             // Build filter if filtering OR case insensitive filtering is enabled and the number of options exceeds (or equals) enableFilterLength.
  695.             if (this.options.enableFiltering || this.options.enableCaseInsensitiveFiltering) {
  696.                 var enableFilterLength = Math.max(this.options.enableFiltering, this.options.enableCaseInsensitiveFiltering);
  698.                 if (this.$select.find('option').length >= enableFilterLength) {
  700.                     this.$filter = $(this.options.templates.filter);
  701.                     $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
  703.                     // Adds optional filter clear button
  704.                     if (this.options.includeFilterClearBtn) {
  705.                         var clearBtn = $(this.options.templates.filterClearBtn);
  706.                         clearBtn.on('click', $.proxy(function (event) {
  707.                             clearTimeout(this.searchTimeout);
  708.                             this.$filter.find('.multiselect-search').val('');
  709.                             $('li', this.$ul).show().removeClass("filter-hidden");
  710.                             this.updateSelectAll();
  711.                         }, this));
  712.                         this.$filter.find('.input-group').append(clearBtn);
  713.                     }
  715.                     this.$ul.prepend(this.$filter);
  717.                     this.$filter.val(this.query).on('click', function (event) {
  718.                         event.stopPropagation();
  719.                     }).on('input keydown', $.proxy(function (event) {
  720.                         // Cancel enter key default behaviour
  721.                         if (event.which === 13) {
  722.                             event.preventDefault();
  723.                         }
  725.                         // This is useful to catch "keydown" events after the browser has updated the control.
  726.                         clearTimeout(this.searchTimeout);
  728.                         this.searchTimeout = this.asyncFunction($.proxy(function () {
  730.                             if (this.query !== event.target.value) {
  731.                                 this.query = event.target.value;
  733.                                 var currentGroup, currentGroupVisible;
  734.                                 $.each($('li', this.$ul), $.proxy(function (index, element) {
  735.                                     var value = $('input', element).length > 0 ? $('input', element).val() : "";
  736.                                     var text = $('label', element).text();
  738.                                     var filterCandidate = '';
  739.                                     if ((this.options.filterBehavior === 'text')) {
  740.                                         filterCandidate = text;
  741.                                     }
  742.                                     else if ((this.options.filterBehavior === 'value')) {
  743.                                         filterCandidate = value;
  744.                                     }
  745.                                     else if (this.options.filterBehavior === 'both') {
  746.                                         filterCandidate = text + '\n' + value;
  747.                                     }
  749.                                     if (value !== this.options.selectAllValue && text) {
  750.                                         // By default lets assume that element is not
  751.                                         // interesting for this search.
  752.                                         var showElement = false;
  754.                                         if (this.options.enableCaseInsensitiveFiltering && filterCandidate.toLowerCase().indexOf(this.query.toLowerCase()) > -1) {
  755.                                             showElement = true;
  756.                                         }
  757.                                         else if (filterCandidate.indexOf(this.query) > -1) {
  758.                                             showElement = true;
  759.                                         }
  761.                                         // Toggle current element (group or group item) according to showElement boolean.
  762.                                         $(element).toggle(showElement).toggleClass('filter-hidden', !showElement);
  764.                                         // Differentiate groups and group items.
  765.                                         if ($(element).hasClass('multiselect-group')) {
  766.                                             // Remember group status.
  767.                                             currentGroup = element;
  768.                                             currentGroupVisible = showElement;
  769.                                         }
  770.                                         else {
  771.                                             // Show group name when at least one of its items is visible.
  772.                                             if (showElement) {
  773.                                                 $(currentGroup).show().removeClass('filter-hidden');
  774.                                             }
  776.                                             // Show all group items when group name satisfies filter.
  777.                                             if (!showElement && currentGroupVisible) {
  778.                                                 $(element).show().removeClass('filter-hidden');
  779.                                             }
  780.                                         }
  781.                                     }
  782.                                 }, this));
  783.                             }
  785.                             this.updateSelectAll();
  786.                         }, this), 300, this);
  787.                     }, this));
  788.                 }
  789.             }
  790.         },
  792.         /** * Unbinds the whole plugin. */
  793.         destroy: function () {
  794.             this.$container.remove();
  795.             this.$select.show();
  796.             this.$select.data('multiselect', null);
  797.         },
  799.         /** * Refreshs the multiselect based on the selected options of the select. */
  800.         refresh: function () {
  801.             $('option', this.$select).each($.proxy(function (index, element) {
  802.                 var $input = $('li input', this.$ul).filter(function () {
  803.                     return $(this).val() === $(element).val();
  804.                 });
  806.                 if ($(element).is(':selected')) {
  807.                     $input.prop('checked', true);
  809.                     if (this.options.selectedClass) {
  810.                         $input.closest('li')
  811.                             .addClass(this.options.selectedClass);
  812.                     }
  813.                 }
  814.                 else {
  815.                     $input.prop('checked', false);
  817.                     if (this.options.selectedClass) {
  818.                         $input.closest('li')
  819.                             .removeClass(this.options.selectedClass);
  820.                     }
  821.                 }
  823.                 if ($(element).is(":disabled")) {
  824.                     $input.attr('disabled', 'disabled')
  825.                         .prop('disabled', true)
  826.                         .closest('li')
  827.                         .addClass('disabled');
  828.                 }
  829.                 else {
  830.                     $input.prop('disabled', false)
  831.                         .closest('li')
  832.                         .removeClass('disabled');
  833.                 }
  834.             }, this));
  836.             this.updateButtonText();
  837.             this.updateSelectAll();
  838.         },
  840.         /** * Select all options of the given values. * * If triggerOnChange is set to true, the on change event is triggered if * and only if one value is passed. * * @param {Array} selectValues * @param {Boolean} triggerOnChange */
  841.         select: function (selectValues, triggerOnChange) {
  842.             if (!$.isArray(selectValues)) {
  843.                 selectValues = [selectValues];
  844.             }
  846.             for (var i = 0; i < selectValues.length; i++) {
  847.                 var value = selectValues[i];
  849.                 if (value === null || value === undefined) {
  850.                     continue;
  851.                 }
  853.                 var $option = this.getOptionByValue(value);
  854.                 var $checkbox = this.getInputByValue(value);
  856.                 if ($option === undefined || $checkbox === undefined) {
  857.                     continue;
  858.                 }
  860.                 if (!this.options.multiple) {
  861.                     this.deselectAll(false);
  862.                 }
  864.                 if (this.options.selectedClass) {
  865.                     $checkbox.closest('li')
  866.                         .addClass(this.options.selectedClass);
  867.                 }
  869.                 $checkbox.prop('checked', true);
  870.                 $option.prop('selected', true);
  871.             }
  873.             this.updateButtonText();
  874.             this.updateSelectAll();
  876.             if (triggerOnChange && selectValues.length === 1) {
  877.                 this.options.onChange($option, true);
  878.             }
  879.         },
  881.         /** * Clears all selected items. */
  882.         clearSelection: function () {
  883.             this.deselectAll(false);
  884.             this.updateButtonText();
  885.             this.updateSelectAll();
  886.         },
  888.         /** * Deselects all options of the given values. * * If triggerOnChange is set to true, the on change event is triggered, if * and only if one value is passed. * * @param {Array} deselectValues * @param {Boolean} triggerOnChange */
  889.         deselect: function (deselectValues, triggerOnChange) {
  890.             if (!$.isArray(deselectValues)) {
  891.                 deselectValues = [deselectValues];
  892.             }
  894.             for (var i = 0; i < deselectValues.length; i++) {
  895.                 var value = deselectValues[i];
  897.                 if (value === null || value === undefined) {
  898.                     continue;
  899.                 }
  901.                 var $option = this.getOptionByValue(value);
  902.                 var $checkbox = this.getInputByValue(value);
  904.                 if ($option === undefined || $checkbox === undefined) {
  905.                     continue;
  906.                 }
  908.                 if (this.options.selectedClass) {
  909.                     $checkbox.closest('li')
  910.                         .removeClass(this.options.selectedClass);
  911.                 }
  913.                 $checkbox.prop('checked', false);
  914.                 $option.prop('selected', false);
  915.             }
  917.             this.updateButtonText();
  918.             this.updateSelectAll();
  920.             if (triggerOnChange && deselectValues.length === 1) {
  921.                 this.options.onChange($option, false);
  922.             }
  923.         },
  925.         /** * Selects all enabled & visible options. * * If justVisible is true or not specified, only visible options are selected. * * @param {Boolean} justVisible * @param {Boolean} triggerOnSelectAll */
  926.         selectAll: function (justVisible, triggerOnSelectAll) {
  927.             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
  928.             var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
  929.             var visibleCheckboxes = allCheckboxes.filter(":visible");
  930.             var allCheckboxesCount = allCheckboxes.length;
  931.             var visibleCheckboxesCount = visibleCheckboxes.length;
  933.             if (justVisible) {
  934.                 visibleCheckboxes.prop('checked', true);
  935.                 $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
  936.             }
  937.             else {
  938.                 allCheckboxes.prop('checked', true);
  939.                 $("li:not(.divider):not(.disabled)", this.$ul).addClass(this.options.selectedClass);
  940.             }
  942.             if (allCheckboxesCount === visibleCheckboxesCount || justVisible === false) {
  943.                 $("option:enabled", this.$select).prop('selected', true);
  944.             }
  945.             else {
  946.                 var values = visibleCheckboxes.map(function () {
  947.                     return $(this).val();
  948.                 }).get();
  950.                 $("option:enabled", this.$select).filter(function (index) {
  951.                     return $.inArray($(this).val(), values) !== -1;
  952.                 }).prop('selected', true);
  953.             }
  955.             if (triggerOnSelectAll) {
  956.                 this.options.onSelectAll();
  957.             }
  958.         },
  960.         /** * Deselects all options. * * If justVisible is true or not specified, only visible options are deselected. * * @param {Boolean} justVisible */
  961.         deselectAll: function (justVisible) {
  962.             var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
  964.             if (justVisible) {
  965.                 var visibleCheckboxes = $("li input[type='checkbox']:not(:disabled)", this.$ul).filter(":visible");
  966.                 visibleCheckboxes.prop('checked', false);
  968.                 var values = visibleCheckboxes.map(function () {
  969.                     return $(this).val();
  970.                 }).get();
  972.                 $("option:enabled", this.$select).filter(function (index) {
  973.                     return $.inArray($(this).val(), values) !== -1;
  974.                 }).prop('selected', false);
  976.                 if (this.options.selectedClass) {
  977.                     $("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);
  978.                 }
  979.             }
  980.             else {
  981.                 $("li input[type='checkbox']:enabled", this.$ul).prop('checked', false);
  982.                 $("option:enabled", this.$select).prop('selected', false);
  984.                 if (this.options.selectedClass) {
  985.                     $("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
  986.                 }
  987.             }
  988.         },
  990.         /** * Rebuild the plugin. * * Rebuilds the dropdown, the filter and the select all option. */
  991.         rebuild: function () {
  992.             this.$ul.html('');
  994.             // Important to distinguish between radios and checkboxes.
  995.             this.options.multiple = this.$select.attr('multiple') === "multiple";
  997.             this.buildSelectAll();
  998.             this.buildDropdownOptions();
  999.             this.buildFilter();
  1001.             this.updateButtonText();
  1002.             this.updateSelectAll();
  1004.             if (this.options.disableIfEmpty && $('option', this.$select).length <= 0) {
  1005.                 this.disable();
  1006.             }
  1007.             else {
  1008.                 this.enable();
  1009.             }
  1011.             if (this.options.dropRight) {
  1012.                 this.$ul.addClass('pull-right');
  1013.             }
  1014.         },
  1016.         /** * The provided data will be used to build the dropdown. */
  1017.         dataprovider: function (dataprovider) {
  1019.             var groupCounter = 0;
  1020.             var $select = this.$select.empty();
  1022.             $.each(dataprovider, function (index, option) {
  1023.                 var $tag;
  1025.                 if ($.isArray(option.children)) { // create optiongroup tag
  1026.                     groupCounter++;
  1028.                     $tag = $('<optgroup/>').attr({
  1029.                         label: option.label || 'Group ' + groupCounter,
  1030.                         disabled: !!option.disabled
  1031.                     });
  1033.                     forEach(option.children, function (subOption) { // add children option tags
  1034.                         $tag.append($('<option/>').attr({
  1035.                             value: subOption.value,
  1036.                             label: subOption.label || subOption.value,
  1037.                             title: subOption.title,
  1038.                             selected: !!subOption.selected,
  1039.                             disabled: !!subOption.disabled
  1040.                         }));
  1041.                     });
  1042.                 }
  1043.                 else {
  1044.                     $tag = $('<option/>').attr({
  1045.                         value: option.value,
  1046.                         label: option.label || option.value,
  1047.                         title: option.title,
  1048.                         selected: !!option.selected,
  1049.                         disabled: !!option.disabled
  1050.                     });
  1051.                 }
  1053.                 $select.append($tag);
  1054.             });
  1056.             this.rebuild();
  1057.         },
  1059.         /** * Enable the multiselect. */
  1060.         enable: function () {
  1061.             this.$select.prop('disabled', false);
  1062.             this.$button.prop('disabled', false)
  1063.                 .removeClass('disabled');
  1064.         },
  1066.         /** * Disable the multiselect. */
  1067.         disable: function () {
  1068.             this.$select.prop('disabled', true);
  1069.             this.$button.prop('disabled', true)
  1070.                 .addClass('disabled');
  1071.         },
  1073.         /** * Set the options. * * @param {Array} options */
  1074.         setOptions: function (options) {
  1075.             this.options = this.mergeOptions(options);
  1076.         },
  1078.         /** * Merges the given options with the default options. * * @param {Array} options * @returns {Array} */
  1079.         mergeOptions: function (options) {
  1080.             return $.extend(true, {}, this.defaults, this.options, options);
  1081.         },
  1083.         /** * Checks whether a select all checkbox is present. * * @returns {Boolean} */
  1084.         hasSelectAll: function () {
  1085.             return $('li.multiselect-all', this.$ul).length > 0;
  1086.         },
  1088.         /** * Updates the select all checkbox based on the currently displayed and selected checkboxes. */
  1089.         updateSelectAll: function () {
  1090.             if (this.hasSelectAll()) {
  1091.                 var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul);
  1092.                 var allBoxesLength = allBoxes.length;
  1093.                 var checkedBoxesLength = allBoxes.filter(":checked").length;
  1094.                 var selectAllLi = $("li.multiselect-all", this.$ul);
  1095.                 var selectAllInput = selectAllLi.find("input");
  1097.                 if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
  1098.                     selectAllInput.prop("checked", true);
  1099.                     selectAllLi.addClass(this.options.selectedClass);
  1100.                     this.options.onSelectAll();
  1101.                 }
  1102.                 else {
  1103.                     selectAllInput.prop("checked", false);
  1104.                     selectAllLi.removeClass(this.options.selectedClass);
  1105.                 }
  1106.             }
  1107.         },
  1109.         /** * Update the button text and its title based on the currently selected options. */
  1110.         updateButtonText: function () {
  1111.             var options = this.getSelected();
  1113.             // First update the displayed button text.
  1114.             if (this.options.enableHTML) {
  1115.                 $('.multiselect .multiselect-selected-text', this.$container).html(this.options.buttonText(options, this.$select));
  1116.             }
  1117.             else {
  1118.                 $('.multiselect .multiselect-selected-text', this.$container).text(this.options.buttonText(options, this.$select));
  1119.             }
  1121.             // Now update the title attribute of the button.
  1122.             $('.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));
  1123.         },
  1125.         /** * Get all selected options. * * @returns {jQUery} */
  1126.         getSelected: function () {
  1127.             return $('option', this.$select).filter(":selected");
  1128.         },
  1130.         /** * Gets a select option by its value. * * @param {String} value * @returns {jQuery} */
  1131.         getOptionByValue: function (value) {
  1133.             var options = $('option', this.$select);
  1134.             var valueToCompare = value.toString();
  1136.             for (var i = 0; i < options.length; i = i + 1) {
  1137.                 var option = options[i];
  1138.                 if (option.value === valueToCompare) {
  1139.                     return $(option);
  1140.                 }
  1141.             }
  1142.         },
  1144.         /** * Get the input (radio/checkbox) by its value. * * @param {String} value * @returns {jQuery} */
  1145.         getInputByValue: function (value) {
  1147.             var checkboxes = $('li input', this.$ul);
  1148.             var valueToCompare = value.toString();
  1150.             for (var i = 0; i < checkboxes.length; i = i + 1) {
  1151.                 var checkbox = checkboxes[i];
  1152.                 if (checkbox.value === valueToCompare) {
  1153.                     return $(checkbox);
  1154.                 }
  1155.             }
  1156.         },
  1158.         /** * Used for knockout integration. */
  1159.         updateOriginalOptions: function () {
  1160.             this.originalOptions = this.$select.clone()[0].options;
  1161.         },
  1163.         asyncFunction: function (callback, timeout, self) {
  1164.             var args = Array.prototype.slice.call(arguments, 3);
  1165.             return setTimeout(function () {
  1166.                 callback.apply(self || window, args);
  1167.             }, timeout);
  1168.         },
  1170.         setAllSelectedText: function (allSelectedText) {
  1171.             this.options.allSelectedText = allSelectedText;
  1172.             this.updateButtonText();
  1173.         }
  1174.     };
  1176.     $.fn.multiselect = function (option, parameter, extraOptions) {
  1177.         return this.each(function () {
  1178.             var data = $(this).data('multiselect');
  1179.             var options = typeof option === 'object' && option;
  1181.             // Initialize the multiselect.
  1182.             if (!data) {
  1183.                 data = new Multiselect(this, options);
  1184.                 $(this).data('multiselect', data);
  1185.             }
  1187.             // Call multiselect method.
  1188.             if (typeof option === 'string') {
  1189.                 data[option](parameter, extraOptions);
  1191.                 if (option === 'destroy') {
  1192.                     $(this).data('multiselect', false);
  1193.                 }
  1194.             }
  1195.         });
  1196.     };
  1198.     $.fn.multiselect.Constructor = Multiselect;
  1200.     $(function () {
  1201.         $("select[data-role=multiselect]").multiselect();
  1202.     });
  1204. }(window.jQuery);

HTML代码：

  1. <asp:DropDownList runat="server" CssClass="form-control" multiple="multiple" ID="Caccey_location_ddl">
  2.                                 </asp:DropDownList>
  3.  <asp:DropDownList runat="server" CssClass="form-control" ID="cabinet_code_ddl" multiple="multiple" >
  4.                                             </asp:DropDownList>
  6.  <script type="text/javascript"> $(document).ready(function () { $('#MainContent_Caccey_location_ddl').multiselect({ includeSelectAllOption: true, enableFiltering: true, maxHeight: 400, numberDisplayed: 1 }); $('#MainContent_cabinet_code_ddl').multiselect({ includeSelectAllOption: true, enableFiltering: true, maxHeight: 400, numberDisplayed: 1, enableCaseInsensitiveFiltering: true }); });

清空勾选项：

  1. $('option', $('#MainContent_cabinet_code_ddl')).each(function (element) { 
  2.         $(this).removeAttr('selected').prop('selected', false);
  3.     });
  4.     $('#MainContent_cabinet_code_ddl').multiselect('refresh');

清空勾选项(先销毁，再绑定)：

  1. $('#MainContent_cabinet_code_ddl').multiselect('destroy');
  2.  $('#MainContent_cabinet_code_ddl').multiselect({
  3.         includeSelectAllOption: true,
  4.         enableFiltering: true,
  5.         maxHeight: 400,
  6.         numberDisplayed: 1
  7.     });

获取勾选项数据：

  1. var cabinet_code = "";
  2.     $("#MainContent_cabinet_code_ddl").next().find(".multiselect-container .active").each(function () {
  3.         var value = $(this).find(" a label input").val();
  4.         if (value != "" && value != "multiselect-all" && (typeof (value) != "undefined")) {
  5.             cabinet_code += "'" + value + "',";
  6.         }
  7.     })

动态切换下拉框：

这里写图片描述

  1. function ReservationTypeChange(obj) { 
  2.     $("#GuestMenuResult_ddl").html("");
  3.     $('#GuestMenuResult_ddl').multiselect('dataprovider', '');
  4.     var code = $.trim($(obj).val());
  5.     if (code != "") {
  6.         $.ajax({
  7.             async: false,
  8.             cache: false,
  9.             url: "../AjaxPage/GetAjax.aspx?z=GetPubGuestMenuInfoBycode&code=" + escape(code) + "",
  10.             dataType: 'json',
  11.             success: function (data) { 
  12.                 if (data == null) {
  13.                     $("#GuestMenuResult_ddl").html("");
  14.                 }
  15.                 else if (data.msg == 'OffLineLogin') {
  16.                     OffLineLoginTimeoutNoTop();
  17.                 }
  18.                 else if (data.msg == 'login_timeout') {
  19.                     LoginTimeout();
  20.                 }
  21.                 else if (data != null && data.msg != 'login_timeout') {
  22.                     var options = [];
  23.                     options.push({ label: '全部', value: 'pleaseselect', selected: true });
  24.                     if (data["GuestMenuInfo"] != null && data["GuestMenuInfo"] != "") {
  25.                         for (var i = 0; i < data["GuestMenuInfo"].length; i++) {
  26.                             var model = data["GuestMenuInfo"][i];
  27.                             options.push({ label: $.trim(model.name), value: $.trim(model.id) });
  28.                         }
  29.                         $('#GuestMenuResult_ddl').multiselect('dataprovider', options);
  30.                     }
  31.                 }
  32.             },
  33.             error: function (msg) { 
  34.                 $("#GuestMenuResult_ddl").html("");
  35.             }
  36.         });
  37.     }
  38. }

发表评论

表情：
评论列表 （有 0 条评论，598人围观）

还没有评论，来说两句吧...

相关阅读