Как имитировать кастомное событие?
Для селектов используется библиотека 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/ |
Если по событию change на селекте указать value, то это тоже не даёт результата
|
Цитата:
<!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>
|
Цитата:
|
Цитата:
|
Цитата:
 Выберу другую цифру - снова продублируется опция во втором селекте _______ Можно было бы сперва sel[1].clearStore(); а потом через sel[1].setChoices() добавить все опции указав выбранный. Но решение как-то не очень. |
CryNet,
хмммм... чего-то в |
CryNet,
пост #3 смотрите снова, строки 9, 10, 35!!! |
Цитата:
|
| Часовой пояс GMT +3, время: 16:41. |