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

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

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

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

または

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

結果としてchangeイベントがトリガーされますが、これはかなり論理的なことだと思います。正しい？

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

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

または

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

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

非常によく似た問題があり、提案されたコードがうまく機能したため、問題の原因がよくわかりません。それはすぐに（あなたの要件）、次の変更コードをトリガーします。

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

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

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

そのため、データベースの既存の値が「N」の場合、フォームの2次入力フィールドがすぐに非表示になります。

私が見つけた1つのこと（難しい方法）は、

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

使用する前に定義

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

または

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

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

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

本当にこれを実行したい場合は、間隔でDOMをチェックし、変更された値を追跡する関数を作成するのが唯一の方法だと思いますが、必要でない限り、絶対にこれを行わないでください（必要な理由がわからないため）。

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

必ずreturn this、jQuery形式でチェーンできるようにしてください。

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

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

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

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

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