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

Question

tgarl @tgarl

JavaScript

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

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

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

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

Вопрос задан 27 нояб.
68 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

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

8 комментариев

tgarl @tgarl Автор вопроса
Это в пределах одного скрипта, а у меня их 2.

т.е. в первом как у вас

const select =... const hiddenInput = ...

только у меня константы это input и option называются
Если влезть в работу этого скрипта то все норм, тут нет проблем, кроме одной скрипт обобщеный для разных страниц и блоков. Это кастомный селект, который на определенные действия элементов списка прописывает значение выбранное в скрытое поле input.

Но на некоторых страницах нужно на это изменение чтобы отработал другой, независимый скрипт. Но он ловит change от первого скрипта.
Написано 27 нояб.
Евгений @mscmls
Не могу понять что за кастомный селект и чем он триггерится сам. В любом случае можно эту часть вызвать в одном скрипте:

select?.addEventListener('change', e => { hiddenInput.value = e.target.value hiddenInput.dispatchEvent(hiddenInputEvent) })

А эту в другом:

hiddenInput?.addEventListener('change', e => { console.log(hiddenInput.value) })

Если у тебя не стандартный элемент ввода (не select, как в примере), то вешай вместо 'change' что-то, что можно отследить.
Написано 27 нояб.

tgarl @tgarl Автор вопроса

Да, это не стандартный селект. страуктура примерно такая

<div>
    <input />
    <div>Текст выбранный</div>
    <div class="list">
         <div>1 значение</div>
         <div>2 значение</div>
         <div>3 значение</div>
    </div>
</div>

и соответсвенно изменнения в инзуте происходят на событии

option.addEventListener("click",function(e){
input.value = option.dataset.val;
}

Написано 27 нояб.

Евгений @mscmls

tgarl, ну вот в обработчике клика, после присвоения input.value значения - вызывай на этом инпуте dispatchEvent.

Написано 27 нояб.
tgarl @tgarl Автор вопроса
я пробовал после
input.value = option.dataset.val;
добавить

input.dispatchEvent(new Event('change')) ; и input.dispatchEvent(new Event('rechange')) ; и input.dispatchEvent('change');

не видит ни тот ни тот вариант
Клик на элемент option видит, а вот изменение внутри клика у input нет
Написано 28 нояб.
Евгений @mscmls

tgarl, Event и InputEvent - это разное.

Написано 28 нояб.
Александр @Seasle Куратор тега JavaScript

tgarl, rechange это сильно конечно. Если цель разобраться - то открываем ДевТулзы и вешаем прослушку всех (или интересующих) событий на элемент через monitorEvents. Там же и увидите, какие события диспатчатся на элементе.

Написано 28 нояб.
Евгений @mscmls

Александр, rechange это как событие, но которое уже триггерилось :d
Если по сути - за monitorEvents спасибо, не знал что такая тулза есть.

Написано 20 часов назад

Ваш ответ на вопрос

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

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

JavaScript

+1 ещё

Средний
Чем отличается функция от конструктора и где применять то или это?
- 1 подписчик
- 2 часа назад
- 85 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как перебрать цвета радуги плавно по циклу?
- 1 подписчик
- 8 часов назад
- 81 просмотр
2

ответа
JavaScript

+1 ещё

Простой
Как закрыть рекомендации rutube iframe?
- 1 подписчик
- 22 часа назад
- 68 просмотров
0

ответов
JavaScript

Простой
Как отключить strictMode у плагина intl-tel-input?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
JavaScript

Простой
Что происходит со свойством класса при присвоении извне?
- 1 подписчик
- вчера
- 82 просмотра
4

ответа
JavaScript

+1 ещё

Простой
Как правильно застримить большой поток из exec(...).stdout в ответ сервера?
- 1 подписчик
- вчера
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как запускать только текущее (открытое) видео в слайдере swiper?
- 2 подписчика
- 28 нояб.
- 106 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как определить инлайн стиль и заменить на соответствующие теги?
- 1 подписчик
- 28 нояб.
- 59 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 2 подписчика
- 28 нояб.
- 53 просмотра
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- 27 нояб.
- 109 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Задеплоить server-папку приложения на сервис Render

30 нояб. 2024, в 17:26

300 руб./за проект

Разработать анализатор html и pdf на принципах машинного обучения

30 нояб. 2024, в 17:12

150000 руб./за проект

Разработка Web3 Телеграм ботов для Solana

30 нояб. 2024, в 16:20

30000 руб./за проект

Answer 1 · 2024-11-27 18:46:56

Через 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)
                    }
                }

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

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

Минуточку внимания

Войдите на сайт