Как установить триггер onchange для реагирования на изменения значения?

Question

Заур

javascript

Как установить триггер onchange для реагирования на изменения значения?

У вас есть скрипт для кастомного селекта, который обновляет значение скрытого инпута с помощью следующего кода: 

<pre><code class="javascript">let input = select.querySelector(".select-input");
...
input.value = option.dataset.val;</code></pre>

Теперь вам нужно создать отдельный скрипт, который будет отслеживать изменение значения этого инпута. Как можно добавить триггер события 'change' для изменения значения input.value?

27 ноября 2024 г. 14:33

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы отслеживать изменения значения скрытого инпута и реагировать на них, вы можете использовать событие `change`. Наиболее простой способ — это добавить обработчик события для вашего инпута сразу после того, как вы обновили его значение.

Вот пример, как это можно сделать:

```javascript
// Получаем ссылку на скрытый инпут
let input = select.querySelector(".select-input");

// Обработчик события change
input.addEventListener("change", function() {
    console.log("Значение инпута изменилось на: ", this.value);
    // Здесь вы можете добавить любую другую логику, которая требуется при изменении значения
});

// Функция для обновления значения инпута
function updateInputValue(val) {
    input.value = val;
    // После обновления значения вызываем событие change
    let event = new Event('change'); // Создаем новое событие
    input.dispatchEvent(event); // Вызываем его
}

// Пример использования
function onOptionSelect(option) {
    updateInputValue(option.dataset.val);
}
```

В этом коде мы сначала добавляем обработчик события `change` на скрытый инпут. Затем, когда мы собираемся обновить его значение (в функции `updateInputValue`), мы создаем новое событие `change` с помощью `new Event('change')` и вызываем его с помощью `input.dispatchEvent(event)`.

Таким образом, обработчик события `change` сработает, когда вы обновите значение инпута через вашу функцию.

Answer 2

Через dispatchEvent? <br/> <br/> <pre><code class="html">&lt;body&gt;
        &lt;select&gt;
            &lt;option&gt;1&lt;/option&gt;
            &lt;option&gt;2&lt;/option&gt;
        &lt;/select&gt;
        &lt;input class="select-input" type="hidden"/&gt;
        &lt;script&gt;
            const select = document.querySelector('select')
            const hiddenInput = document.querySelector('.select-input')
            const hiddenInputEvent = new InputEvent('change')
            select?.addEventListener('change', e =&gt; {
                hiddenInput.value = e.target.value
                hiddenInput.dispatchEvent(hiddenInputEvent)
            })
            hiddenInput?.addEventListener('change', e =&gt; {
                console.log(hiddenInput.value)
            })
        &lt;/script&gt;
    &lt;/body&gt;</code></pre> <br/> <br/>