Форум

CryNet · #1 (**permalink**) 13.02.2020, 11:04

Для селектов используется библиотека Choices.JS. Здесь есть кастомное событие, которое всплывает при выборе опции в селекте (choice, addItems). Мне необходимо, чтобы при выборе в одном селекте, в другом выбиралось тоже самое. Но у меня не получается имитировать этот выбор.

Ещё я не могу понять, мне имитировать эти кастомные события или же можно просто change...

Я пытался решить это таким образом:

let choices = another_select[0].closest(".choices").querySelector(".choices__item.choices__item--choice.choices__item--selectable[data-value=\"2\"]") // элемент, который должны выбрать
        
        choices.addEventListener("choice", (event) => {
          console.log(event);
        });
       // указываем выбранный option
        choices.dispatchEvent(new CustomEvent("choice", {
          detail: {
            choice: {
              value: '2'
            }
          }
        }))

Но это не работает

Песочница: https://jsfiddle.net/xa7npb85/2/

CryNet · #2 (**permalink**) 13.02.2020, 11:16

Если по событию change на селекте указать value, то это тоже не даёт результата

рони · #3 (**permalink**) 13.02.2020, 11:49

Сообщение от CryNet

чтобы при выборе в одном селекте, в другом выбиралось тоже самое.

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"  />

<div>
<select id="sel1">
<option>1</option>
<option value='2' selected>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
<br>
<div>
<select id="sel2">
<option>1</option>
<option value='2'>2</option>
<option selected>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
<script>
/* Скармливаем селекты библиотеке  */
function choicesInit(select, param) {
    const elements = Array.from(document.querySelectorAll(select))
    // Если есть атрибут 'data-choice' - значит селект обрабатывался библиотекой - отбасываем его
    const item = elements.filter(function (elements) {
        if (!elements.getAttribute('data-choice')) { return elements }
    });
    const instances = item.map((element) => {
        return new Choices(element, param)
    });
    return  instances
}
const sel = choicesInit('select', {searchEnabled: false, shouldSort: false, itemSelectText: ''});
sel[0].passedElement.element.addEventListener('change',  function(event) {  sel[1].setChoiceByValue(event.detail.value)})
sel[1].passedElement.element.addEventListener('change',  function(event) {  sel[0].setChoiceByValue(event.detail.value)})
</script>

</body>
</html>

CryNet · #4 (**permalink**) 13.02.2020, 13:09

Сообщение от рони

<!DOCTYPE html>
<html></html>

Блин, круто, спасибо. Вот только при выборе дублируются опции

рони · #5 (**permalink**) 13.02.2020, 13:18

Сообщение от CryNet

Вот только при выборе дублируются опции

не понимаю

CryNet · #6 (**permalink**) 13.02.2020, 13:21

Сообщение от рони

не понимаю

Я выбрал 7

Выберу другую цифру - снова продублируется опция во втором селекте

_______

Можно было бы сперва sel[1].clearStore(); а потом через sel[1].setChoices() добавить все опции указав выбранный. Но решение как-то не очень.

рони · #7 (**permalink**) 13.02.2020, 13:59

CryNet,
хмммм... чего-то в ~~супе~~ коде не хватает...

рони · #8 (**permalink**) 13.02.2020, 14:20

CryNet,
пост #3 смотрите снова, строки 9, 10, 35!!!

CryNet · #9 (**permalink**) 13.02.2020, 16:17

Сообщение от рони

CryNet,
пост #3 смотрите снова, строки 9, 10, 35!!!

Спасибо большое за решение!

Форум

Справочник

Discord чат

Курсы javascript