Вход

Просмотр полной версии : Как имитировать кастомное событие?

CryNet
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
13.02.2020, 11:16
Если по событию change на селекте указать value, то это тоже не даёт результата
рони
13.02.2020, 11:49
чтобы при выборе в одном селекте, в другом выбиралось тоже самое.
<!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
13.02.2020, 13:09
<!DOCTYPE html>
<html></html>

Блин, круто, спасибо. Вот только при выборе дублируются опции
рони
13.02.2020, 13:18
Вот только при выборе дублируются опции
не понимаю
CryNet
13.02.2020, 13:21
не понимаю
Я выбрал 7
https://i.ibb.co/FnT4tck/Screenshot-20200213-122535.png

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

_______

Можно было бы сперва sel[1].clearStore(); а потом через sel[1].setChoices() добавить все опции указав выбранный. Но решение как-то не очень.
рони
13.02.2020, 13:59
CryNet,
хмммм... чего-то в супе коде не хватает...
рони
13.02.2020, 14:20
CryNet,
пост #3 смотрите снова, строки 9, 10, 35!!!
CryNet
13.02.2020, 16:17
CryNet,
пост #3 смотрите снова, строки 9, 10, 35!!!

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