Select2 выбрать теги

Question

Как в Select2, определенным через multiple тэги установить текущее значение, зная только внутреннее значение . Т.е. id неизвестен?

Да, предлагают посылать в метод select2()

data: [
            { id: 1, text: "Ford"     },
            { id: 2, text: "Dodge"    },
            { id: 3, text: "Mercedes" },
            { id: 4, text: "Jaguar"   }
          ]

но, как я сказал, id неизвестны. хотелось бы что-то вроде $("#элемент).select2().выбратьТеги(["Ford", "Dodge" ... ]);

Answer 1

Если вам нужно установить выбранное значение при инициализации select2, то достаточно добавить поле selected: true в данные.

Если же вам нужно изменить значение для select2 по какому-то событию, то для этого все-таки придется найти айдишники для опшнов, потом изменить значение у селекта и не забыть про .trigger('change.select2') иначе значение в select2 не измениться.

$('select').select2({
  width: 100,
  data: [{
      id: 1,
      text: "Ford",
      selected: true
    },
    {
      id: 2,
      text: "Dodge"
    },
    {
      id: 3,
      text: "Mercedes"
    },
    {
      id: 4,
      text: "Jaguar"
    }
  ]
});

$('button').on('click', () => {
  const select = $('select');
  const cars = ['Dodge', 'Jaguar'];
  const carsValues = select
    .find('option')
    .get()
    .filter(option => cars.includes(option.innerText))
    .map(option => option.value);

  const values = select.val() || [];
  select.val([...values, ...carsValues]).trigger('change.select2');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<select multiple></select>
<button>Add Dodge and Jaguar</button>

БЛОГ НА HUSL

Select2 выбрать теги

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