web-dev-qa-db-ja.com

val（）関数で<select>の値を設定するときにchange（）イベントをトリガーします

select要素の値を設定するときにchangeイベントをトリガーする最も簡単で最良の方法は何ですか？.

私は次のコードを実行することを期待しました

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

または

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

変更イベントをトリガーすることになりますが、これはかなり論理的なことだと思います。右？

そうではありません。これを行うことによってchange（）イベントをトリガーする必要があります

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

または

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

しかし、JavaScriptコードによってselectの値が変更されるとすぐにchangeイベントをトリガーするソリューションを探しています。

jqueryeventstriggersonchange
121
Goran Radulovic

私は非常に似たような問題を抱えていましたが、あなたの提案したコードが私にとってうまくいったので、あなたが何に問題を抱えているのかよくわかりません。それ即時（あなたの要件）は以下の変更コードをトリガーします。

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

次に、データベースから値を取得し（これは新しい入力と既存のレコードの編集の両方でフォームで使用されます）、選択した値として設定し、上記のコードをトリガーするために欠落していた部分を追加します" .change（） "。

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

データベースの既存の値が「N」の場合、フォームのセカンダリ入力フィールドがすぐに非表示になります。

115
criticman

私が見つけた一つのこと（難しい方法）は、あなたが持っている必要があるということです

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

使用する前に定義

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

または

 $('#selectField').val(10).change();
40
Dima R.

まっすぐな答えはすでに重複した質問にあります： val（）を使用してselectの値を設定したときにjquery changeイベントがトリガーされないのはなぜですか？

おそらくselectの値を設定してもchange（）イベントはトリガーされませんが、JSを介して要素の値が変更されたときに発生するイベントを探している場合はありません。

あなたが本当にこれをやりたいのなら、間隔でDOMをチェックし、変更された値を追跡する関数を書くことが唯一の方法だと思いますが、必要がない限り絶対にこれをしないでください（なぜそうする必要があるのか​​わかりません）

このソリューションを追加しました：
別の可能な解決策は、独自の.val()ラッパー関数を作成し、.val()を介して値を設定した後にカスタムイベントをトリガーすることです。その後、.val（）ラッパーを使用して<select>の値を設定しますトラップして処理できるカスタムイベントをトリガーします。

必ずreturn thisにしてください。jQuery形式でチェーン可能です。

16
Clarence Liu

それを分離し、次にアイデンティティ比較を使用して、次に何をするかを決定します。

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

JQueryはネイティブの変更イベントをトリガーせず、独自の変更イベントのみをトリガーするため。 jQueryなしでイベントをバインドし、jQueryを使用してトリガーした場合、バインドしたコールバックは実行されません！

ソリューションは次のようになります（100％動作）：

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