jqueryを使用して変更イベント<select>をトリガーする


146

とにかく、ページの読み込み時に選択ボックスで変更イベントをトリガーし、特定のオプションを選択できますか?

また、関数をイベントにバインドした後にトリガーを追加することによって実行される関数。

このようなものを出力しようとしていました

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/


ロード時に特定のオプションを設定しますか?またはあなたの変更イベントをトリガーしたいですか?
マンス

最終的なソリューションについて詳しく教えてください。ページの読み込み時にオプションを強制するか、何か特定のものを選択したときに別のオプションを選択しようとしていますか?
マシューリッチズ

こんにちは。フィードバックをありがとうございます。問題を解決し、文書化しました。
kishanio

回答:


288

テキストではなくval()に変更し、手動でイベントを発生させるために使用します。trigger()

変更イベントハンドラは、トリガーの前に宣言する必要があります。

こちらがサンプルです

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

また、オプションを変更した後、イベント変更機能を実行したいと思いました。WRT これを。警告ボックスが実行されます。
kishanio

@KishanThobhaniは、ハンドラーを追加した後に呼び出す必要があります。サンプルをご覧ください。
ジョセフ

7
このソリューションの重要な部分は次のとおりです。変更イベントハンドラーはトリガーの前に宣言する必要があります(理にかなっています...)。
ラルザン

それは救い主として助けてくれました、ありがとう@Joseph
Divya

あなたが使用する前に定義された変更機能は、私の問題を解決しました。ありがとう。
Kamlesh

28

オプションを選択する.val('value-of-the-option')には、select要素でを使用します。change要素をトリガーするには、.change()またはを使用します.trigger('change')

コードの問題は、ドットインではなくコンマで$('.check'),trigger('change');あり、イベントハンドラーをバインドする前に呼び出すことです。


10
$('#edit_user_details').find('select').trigger('change');

これは、でhtmlタグの選択ドロップダウン項目を変更しますid="edit_user_details"


6

jQueryトリガーハンドラーでブロックされた人のための別の実用的な解決策、ネイティブイベントでの大量の発火は以下のようになります(100%機能します):

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

1
私は上記すべてを試しましたが、これだけが私のために働きます。私の選択はvueの内部にあったためだと思います。ありがとう@ Mohamed23gharbi!
Tillito

1
こっちも一緒。これは私が1時間探していたソリューションです。ありがとう。
ベルナ

1
これが答えである必要があります!
MARS

1

オプションタグの値にリンクを与える

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

1

いくつかのチェックを行いたい場合は、この方法を使用します

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

0

Mohamed23gharbiの答えに基づいて:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

要素がvueによって作成された私の場合、これが機能する唯一の方法です。


0

あなたはあなたの問題を解決するために以下のコードを試すことができます:

デフォルトでは、最初のオプションは以下を選択します:jQuery( '。select')。find( 'option')[0] .selected = true;

ありがとう、Ketan T

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.