Как выбрать элементы у tail.select с помощью JS?

Question

Как можно выбрать значения у tail.select (Ссылка на GitHub) с помощью JS, я пробовал менять value у select, но это не помогает

var items = [
  {key: '11', value: 'aaabs', description: ""},
  {key: '21', value: 'aa', description: ""},
  {key: '31', value: 'bssss', description: ""},
  {key: '41', value: 'bdsss', description: ""},
  {key: '51', value: 'abbb', description: ""},
  {key: '61', value: 'aaa', description: ""},
  {key: '71', value: 'bvbb', description: ""}
];

var instance = tail.select("select", {
  animate: true,
  classNames: null,
  csvOutput: false,
  csvSeparator: ",",
  descriptions: false,
  deselect: false,
  disabled: false,                // NEW IN 0.5.0height: 300,
  width: 250,
  hideDisabled: false,
  hideSelected: false,
  items: items,
  locale: "en",                   // NEW IN 0.5.0
  multiple: true,
  multiLimit: Infinity,           // UPDATE IN 0.5.0
  multiPinSelected: true,        // NEW IN 0.5.0
  multiContainer: false,          // UPDATE IN 0.5.0
  multiShowCount: true,
  multiShowLimit: true,           // NEW IN 0.5.0
  multiSelectAll: true,
  multiSelectGroup: false,
  openAbove: null,
  placeholder: 'Select your choice...',
  search: true,
  searchFocus: true,
  searchMarked: true,
  sortItems: false,
  sortGroups: false,
  sourceBind: false,              // NEW IN 0.5.0
  sourceHide: true,               // NEW IN 0.5.0
  startOpen: true,
  stayOpen: false,                // UPDATED IN 0.5.0
  cbComplete: undefined,          // NEW IN 0.5.0
  cbEmpty: undefined,             // NEW IN 0.5.0
  cbLoopItem: undefined,
  cbLoopGroup: undefined
});
    
function test() {
  $(".tail-select-2").value = "2"; //не помогает.
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/tail.select-default.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/tail.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>


<!-- <select class="tail-select-1" multiple>
    <option value="value 1">value 1</option>
    <option value="other value">other valued</option>
    <option value="test vl">test vl</option>
    <option value="some">some</option>
    <option value="value 5">value 5</option>
    <option value="value 6">value 6</option>
</select> -->

<select class="tail-select-2" multiple></select>
<button onclick="test()">Тест</button>

Answer 1

Согласно документации вам надо использовать метод select

var items = [{
    key: '11',
    value: 'aaabs',
    description: ""
  },
  {
    key: '21',
    value: 'aa',
    description: ""
  },
  {
    key: '31',
    value: 'bssss',
    description: ""
  },
  {
    key: '41',
    value: 'bdsss',
    description: ""
  },
  {
    key: '51',
    value: 'abbb',
    description: ""
  },
  {
    key: '61',
    value: 'aaa',
    description: ""
  },
  {
    key: '71',
    value: 'bvbb',
    description: ""
  }
];

var instance = tail.select("select", {
  animate: true,
  classNames: null,
  csvOutput: false,
  csvSeparator: ",",
  descriptions: false,
  deselect: false,
  disabled: false, // NEW IN 0.5.0height: 300,
  width: 250,
  hideDisabled: false,
  hideSelected: false,
  items: items,
  locale: "en", // NEW IN 0.5.0
  multiple: true,
  multiLimit: Infinity, // UPDATE IN 0.5.0
  multiPinSelected: true, // NEW IN 0.5.0
  multiContainer: false, // UPDATE IN 0.5.0
  multiShowCount: true,
  multiShowLimit: true, // NEW IN 0.5.0
  multiSelectAll: true,
  multiSelectGroup: false,
  openAbove: null,
  placeholder: 'Select your choice...',
  search: true,
  searchFocus: true,
  searchMarked: true,
  sortItems: false,
  sortGroups: false,
  sourceBind: false, // NEW IN 0.5.0
  sourceHide: true, // NEW IN 0.5.0
  startOpen: true,
  stayOpen: false, // UPDATED IN 0.5.0
  cbComplete: undefined, // NEW IN 0.5.0
  cbEmpty: undefined, // NEW IN 0.5.0
  cbLoopItem: undefined,
  cbLoopGroup: undefined
});

function test() {
  instance.options.select(instance.options[1]);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/tail.select-default.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/tail.select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<select class="tail-select-2" multiple></select>
<button onclick="test()">Тест</button>

БЛОГ НА HUSL

Как выбрать элементы у tail.select с помощью JS?

Ответы (1 шт):