Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2020, 11:04
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Как имитировать кастомное событие?
Для селектов используется библиотека 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:09.
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2020, 11:16
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Если по событию change на селекте указать value, то это тоже не даёт результата
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2020, 11:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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>

Последний раз редактировалось рони, 13.02.2020 в 14:38.
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2020, 13:09
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Сообщение от рони Посмотреть сообщение
<!DOCTYPE html>
<html></html>
Блин, круто, спасибо. Вот только при выборе дублируются опции
Ответить с цитированием
  #5 (permalink)  
Старый 13.02.2020, 13:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от CryNet
Вот только при выборе дублируются опции
не понимаю
Ответить с цитированием
  #6 (permalink)  
Старый 13.02.2020, 13:21
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Сообщение от рони Посмотреть сообщение
не понимаю
Я выбрал 7


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

_______

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

Последний раз редактировалось CryNet, 13.02.2020 в 13:30.
Ответить с цитированием
  #7 (permalink)  
Старый 13.02.2020, 13:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

CryNet,
хмммм... чего-то в супе коде не хватает...
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2020, 14:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

CryNet,
пост #3 смотрите снова, строки 9, 10, 35!!!
Ответить с цитированием
  #9 (permalink)  
Старый 13.02.2020, 16:17
Профессор
Отправить личное сообщение для CryNet Посмотреть профиль Найти все сообщения от CryNet
 
Регистрация: 02.01.2019
Сообщений: 151

Сообщение от рони Посмотреть сообщение
CryNet,
пост #3 смотрите снова, строки 9, 10, 35!!!
Спасибо большое за решение!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кастомное событие marc Events/DOM/Window 1 17.02.2018 19:08
Как отловить событие в contenteditable? D_Pavel Events/DOM/Window 10 21.01.2014 16:08
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Событие click как правильно? piraids jQuery 9 20.08.2013 13:01
Как назначить событие html-элементу? Jony X Общие вопросы Javascript 15 15.09.2009 20:55