@tgarl

Как задать тригер onchange при изменении value?

есть скрипт кастомного селекта, который меняет содержимое скрытого инпута

let input = select.querySelector(".select-input");
...
input.value = option.dataset.val;


есть отдельный скрипт в котором нужно поймать изменение значения
как к изменению input.value добавить тригер change?
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
Через dispatchEvent?

<body>
        <select>
            <option>1</option>
            <option>2</option>
        </select>
        <input class="select-input" type="hidden"/>
        <script>
            const select = document.querySelector('select')
            const hiddenInput = document.querySelector('.select-input')
            const hiddenInputEvent = new InputEvent('change')
            select?.addEventListener('change', e => {
                hiddenInput.value = e.target.value
                hiddenInput.dispatchEvent(hiddenInputEvent)
            })
            hiddenInput?.addEventListener('change', e => {
                console.log(hiddenInput.value)
            })
        </script>
    </body>


Либо напрямую через пропсы, как вариант
const select = document.querySelector('select')
            const hiddenInput = document.querySelector('.select-input')
            if(select && hiddenInput){
                    select.onchange = (e) => {
                        hiddenInput.value = e.target.value
                        hiddenInput.onchange?.()
                    }
                    hiddenInput.onchange = (e) => {
                        console.log(hiddenInput.value)
                    }
                }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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