如何设置jQuery easySelect.js的选定值？

问题描述

我正在使用jQuery Advanced MultiSelect。我需要预先选择表示已检查列表中的一两个值。

$("#modellist").easySelect({
  buttons: true,search: true,showEachItem: true,dropdownMaxHeight: '450px',})

<link href="https://www.jqueryscript.net/demo/advanced-multiselect-easy/easySelectStyle.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/advanced-multiselect-easy/easySelect.js"></script>
<div class="dropdown">
  <button class="dropdown-toggle" type="button" id="model" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Product Model
  </button>
  <div class="dropdown-menu" aria-labelledby="model">
    <select id="modellist" data-max="5" multiple="multiple">
      <option value="one" class="selected">Spinner (4 wheels)</option>
      <option value="two">Duffle with wheels</option>
      <option value="three">Upright (2 wheels)</option>
      <option value="four">Garment Bag</option>
      <option value="five">Laptop Bag with wheels</option>
      <option value="six">Duffle Bag</option>
      <option value="seven">Duffle/Backpack with Wheels</option>
    </select>
  </div>
</div>

解决方法

与上述两条评论一样，easyselect不提供该功能，但是您可以通过触发点击事件来预先选择项目。

$("#modellist").easySelect({
  buttons: true,search: true,showEachItem: true,dropdownMaxHeight: '450px',})

// define the elements to preselect
var preSelect = ["one","three","five"];
$('.mulpitply_checkbox_style').each(function(){
  // check if the current item value is in the array
  if($.inArray($(this).val(),preSelect) != -1){
    // trigger a click event in order to preselect the item
    $(this).trigger('click');
  }
});

<link href="https://www.jqueryscript.net/demo/advanced-multiselect-easy/easySelectStyle.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/advanced-multiselect-easy/easySelect.js"></script>
<div class="dropdown">
  <button class="dropdown-toggle" type="button" id="model" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Product Model
  </button>
  <div class="dropdown-menu" aria-labelledby="model">
    <select id="modellist" data-max="5" multiple="multiple">
      <option value="one" class="selected">Spinner (4 wheels)</option>
      <option value="two">Duffle with wheels</option>
      <option value="three">Upright (2 wheels)</option>
      <option value="four">Garment Bag</option>
      <option value="five">Laptop Bag with wheels</option>
      <option value="six">Duffle Bag</option>
      <option value="seven">Duffle/Backpack with Wheels</option>
    </select>
  </div>
</div>