Запуск події зміни () при встановленні значення <select> за допомогою функції val ()

132

Який найпростіший і найкращий спосіб викликати подію зміни при встановленні значення елемента вибору .

Я очікував, що виконати наступний код

$('select#some').val(10);

або

$('select#some').attr('value',  10);

це призведе до запуску події зміни, що, на мою думку, досить логічна річ. Правильно?

Ну, це не так. Потрібно запустити подію change (), зробивши це

$('select#some').val(10).change();

або

$('select#some').val(10).trigger('change');

але я шукаю рішення, яке призведе до зміни події, як тільки значення select зміниться якимось кодом JavaScript.

— Горан Радулович
джерело

чистий javascript element.addEventListener?

— Мануель Бітто

4

$ ('select # some'). val (10) .change (); є майже миттєвим для користувача.

— Димитрій

@Manuel Я це спробував. iv'e використовував object.change = функцію (.... і object.addEventListener (... але жоден з object.value, $ (object) .val () та $ (object) .attr ('value') запустить цього списку

— Горан Радулович

124

У мене була дуже схожа проблема, і я не зовсім впевнений, з чим у вас виникають проблеми, оскільки ваш запропонований код працював для мене чудово. Це негайно (ваша вимога) запускає наступний код зміни.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

Потім я беру значення з бази даних (це використовується у формі як для нового введення, так і для редагування існуючих записів), встановлюю його як вибране значення і додаю частину, яку мені не вистачало, щоб запустити вищевказаний код, ".change () ".

$('#selectField').val(valueFromDatabase).change();

Так що якщо наявне значення з бази даних є "N", воно негайно приховує вторинне поле введення у моїй формі.

— критик
джерело

Це саме те, що мені було потрібно. Який найкращий спосіб дізнатися, як динамічно запускати обробники подій DOM? Чи добре це задокументує jQuery? Дякую!

— Con Antonakos

2

$ ("# знижка_типу") .val (2) .trigger ('змінити');

— Сатананд Тіварі

$ ('# add_itp_spt_parent_id'). val (add_fpt_val) .trigger ('змінити); $ ('# add_itp_spt_parent_id'). change (); обидва рішення не працюють.

— Kamlesh

визначена функція зміни перед тим, як ви користуєтесь, вирішила мою проблему. Дякую.

— Kamlesh

45

Одне, що я дізнався (важкий шлях), - це те, що ти мав би мати

$('#selectField').change(function(){
  // some content ...
});

визначено перед тим, як використовувати

$('#selectField').val(10).trigger('change');

або

 $('#selectField').val(10).change();

— Діма Р.
джерело

4

Стара публікація, але це вирішило мою проблему, врятувало мене від тривалої тріщини мозку ... Ви повинні визначити слухача, перш ніж використовувати його. Навіть у чистому JavaScript.

— Temitayo

Чи можете ви трохи розробити? Чи не з цієї причини існує "change ()"?

— Діма Р.

Я скажу, що, можливо, слухачі подібного типу не піднімаються на навантаженні. У своєму проекті я зателефонував change()перед тим, як визначити слухача, і це не спрацювало, поки я не перемістив change()виклик під слухача, і він спрацював. Я скажу, що це не повинно бути проблемою, це лише питання способу структурування коду.

— Temitayo

1

Це те, що мені було потрібно. Мені довелося назавжди вирішити це питання, дякую.

— Джеймі М.

Браво !!! "визначена функція зміни перед тим, як ви користуєтеся", вирішила мою проблему. Дякую, любий.

— Kamlesh

17

Прямий відповідь вже в повторюваному запитанні: Чому подія зміни jquery не запускається, коли я встановлюю значення вибору за допомогою val ()?

Як ви, напевно, знаєте, що встановлення значення select не викликає події change (), якщо ви шукаєте подію, яка запускається, коли значення елемента було змінено через JS, немає жодного.

Якщо ви дійсно хочете це зробити, я думаю, єдиний спосіб - це записати функцію, яка перевіряє DOM на інтервалі та відстежує змінені значення, але, безумовно, цього не робити, якщо не потрібно (не впевнений, чому вам коли-небудь знадобиться)

Додано це рішення:
Іншим можливим рішенням було б створити власну .val()функцію обгортки та запропонувати їй запустити спеціальну подію після встановлення значення через .val(), тоді, коли ви використовуєте обгортку .val (), щоб встановити значення, <select>воно запустить вашу власну подію яку ви можете захопити і впоратися.

Будьте впевнені return this, щоб це було можливо в jQuery моді

— Кларенс Лю
джерело

Я прочитав кілька форумів з цього питання, і ваша відповідь була останнім завершенням, яке я шукав. Ідея відстеження працює лише як розумовий експеримент, очевидно, це було б абсолютно непрактично, але це ілюстративно; і ідея обгортки є приголомшливою, і дякую за вказівку на "повернути цю" частину. З повагою

— David L

Чому не $('select').val(value).change()працюватимеш весь час? Будь-яке чітке пояснення?

— Істіаке Ахмед

2

Я відокремлюю її, а потім використовую порівняння ідентичності, щоб продиктувати, що робити далі.

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});

— Бомонт
джерело

2

Оскільки jQuery не запускає нативної події зміни, а лише запускає власну подію зміни. Якщо ви прив'язуєте подію без jQuery, а потім використовуєте jQuery, щоб викликати її, зворотні дзвінки, які ви зв'язали, не запускаються!

Тоді рішення, як нижче (100% працює):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));

— Мохамед23гарбі
джерело