jqueryで選択変更イベントをバインドする方法

JQuery バインディング選択変更イベント メソッド: 1. jQuery サンプル ファイルを作成します; 2. "$('select')" セレクターを使用してすべての選択要素を選択し、"on()" でバインドします。メソッド変更イベント; 3. イベントの発生後、コールバック関数は「.val()」および「.find(':selected')」メソッドを使用して、選択された項目の値とテキストを取得します; 4. コンソール出力選択したコンテンツ、またはページ上に表示するだけです。

このチュートリアルのオペレーティング システム: Windows 10 システム、jQuery3.6.0 バージョン、Dell G3 コンピューター。

jQuery を使用すると、簡単に変更イベントをバインドして、select 要素の変更をリッスンできます。

次のコードを使用して実装します:

$(document).ready(function() {
  // 选择 select 元素，并绑定 change 事件
  $('select').on('change', function() {
    // 获取选中项的值和文本
    var selectedValue = $(this).val();
    var selectedText = $(this).find(':selected').text();
    
    // 在控制台输出选中项的值和文本
    console.log('选中了：' + selectedValue + '，' + selectedText);
    
    // 如果需要在页面上显示选中项的值或文本，可以使用以下代码
    // $('#result').text(selectedValue); 
    // $('#result').text(selectedText);
  });
});

上記のコードの $('select') セレクターは、すべての select 要素を選択するために使用され、次に on() メソッドが選択されます。変更イベントをそれらの上にバインドします。コールバック関数は、ユーザーが select 要素でオプションを選択するとトリガーされます。

コールバック関数は最初に選択された項目の値とテキストを取得します。ここでは .val() メソッドと .find(':selected') メソッドが使用されます。選択したコンテンツは、(対応する要素の .text() を変更することにより) コンソールに出力したり、ページに表示したりできます。

ページ内の特定の選択要素を操作する場合は、ID やクラス名などのセレクターに基づいて選択します。例: $('#my-select') または $('.my-select')。

以上がjqueryで選択変更イベントをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。