javascript - 根据数组内容预选复选框

Question

我有一个多选 dropdown显示国家的选择。我想要一些这样的 preselected基于数组的内容。
基于这里的类似问题 How can I check checkboxes based on values?我尝试使用

var arrayValues = (246,247,248,249,250,251,252,253,254,255,256,257,258,259,261,262,263,265,266,267,268,270,271,272,273,274,275);
var i = 0;
while (arrayValues.length < i) {
    var val = arrayValues[i];
    $('#restrictCountry input[value="' + val + '"]').prop('checked', 'checked');
    i++;
}

但它不是预先选择具有数组中显示的值的复选框。
我已经设置了 fiddle所以你可以看到我的多选下拉菜单是如何工作的。预选脚本位于 javascript Pane 的底部。
我在这里做错了什么？

Answer 1

首先你弄错了数组语法，
循环条件也是假的，
最终您制作的选择器无法到达新创建的多选包装器，
我建议(有点棘手)是纠正选择器，然后触发单击检查输入 foreach 值，(这将同时检查选择隐藏和生成的包装器输入)

while (i < arrayValues.length) {
  var val = arrayValues[i];

  $('#restrictCountry').next(".ms-options-wrap").find(` input[value=${val}]`).not(":checked").click();
  i++;
}

检查以下片段:

(function($) {
  var defaults = {
    placeholder: 'Select options', // text to use in dummy input
    columns: 1, // how many columns should be use to show options
    search: false, // include option search box
    // search filter options
    searchOptions: {
      'default': 'Search', // search input placeholder text
      showOptGroups: false, // show option group titles if no options remaining
      onSearch: function(element) {} // fires on keyup before search on options happens
    },
    selectAll: false, // add select all option
    selectGroup: false, // select entire optgroup
    minHeight: 200, // minimum height of option overlay
    maxHeight: null, // maximum height of option overlay
    showCheckbox: true, // display the checkbox to the user
    jqActualOpts: {}, // options for jquery.actual

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

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

  var msCounter = 1;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        instance._updatePlaceholderText();
      });

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

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

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

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

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

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

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

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

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

            instance._addOption(gContainer, thisGOption);

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

          instance._addOption(container, thisOption);
        }

        optionsList.append(container);
      }

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

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

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

      instance._updatePlaceholderText();
    },

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

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

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

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

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

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

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

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

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

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

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

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


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

      msCounter = msCounter + 1;
    },

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

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

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

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

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

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

$('#restrictCountry').multiselect({
  columns: 4,
  placeholder: 'Select Restricted Countries',
  search: true,
  selectAll: true
});

$(function() {
  var arrayValues = [246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 256, 257, 258, 259, 261, 262, 263, 265, 266, 267, 268, 270, 271, 272, 273, 274, 275];
  var i = 0;
  while (i < arrayValues.length) {
    var val = arrayValues[i];
    
    $('#restrictCountry').next(".ms-options-wrap").find(` input[value=${val}]`).not(":checked").click();
    i++;
  }

})

.ms-options-wrap,
.ms-options-wrap * {
  box-sizing: border-box;
  list-style-type: none;
}

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

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

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

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

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

.ms-options-wrap>.ms-options .ms-selectall:hover {
  text-decoration: underline;
}

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

.ms-options-wrap>.ms-options>ul>li.optgroup {
  padding: 5px;
}

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

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <p class="col-sm-3 control-label">Restricted Countries:</p>
  <div class="col-sm-9 col-md-6">
    <select rel="dropdown" name="restrictCountry[]" multiple id="restrictCountry">
      <option value="253">Austria</option>
      <option value="252">Belgium</option>
      <option value="266">Bulgaria</option>
      <option value="270">Croatia</option>
      <option value="274">Czech Republic</option>
      <option value="254">Denmark</option>
      <option value="262">Estonia</option>
      <option value="258">Finland</option>
      <option value="247">France</option>
      <option value="248">Germany</option>
      <option value="260">Gibraltar</option>
      <option value="265">Greece</option>
      <option value="243">Guernsey</option>
      <option value="267">Hungary</option>
      <option value="264">Iceland</option>
      <option value="246">Ireland</option>
      <option value="244">Isle of Man</option>
      <option value="255">Italy</option>
      <option value="245">Jersey</option>
      <option value="263">Latvia</option>
      <option value="259">Lithuania</option>
      <option value="275">Luxembourg</option>
      <option value="273">Malta</option>
      <option value="242">Montenegro</option>
      <option value="249">Netherlands</option>
      <option value="268">Norway</option>
      <option value="241">Palestine, State of</option>
      <option value="250">Poland</option>
      <option value="261">Portugal</option>
      <option value="272">Romania</option>
      <option value="277">Serbia</option>
      <option value="271">Slovakia</option>
      <option value="256">Slovenia</option>
      <option value="251">Spain</option>
      <option value="257">Sweden</option>
      <option value="269">Switzerland</option>
      <option value="276">Turkey</option>
    </select>
  </div>
</div>