ドロップダウンボックス変更イベントjquery

ドロップダウン ボックス変更イベント jQuery は、Web 開発で広く使用されているテクノロジです。 Web デザインでは、多くの場合、ドロップダウン ボックスを使用してさまざまなオプションを選択する必要があります。 jQuery を使用すると、ドロップダウン ボックスのオプションが変更されたときに対応するイベントをトリガーし、Web ページのコンテンツをリアルタイムで更新または変更できます。 jQueryを使ってドロップダウンボックス変更イベントを実装する方法を紹介します。

1. 基本操作

jQuery では、ドロップダウン ボックスの変更イベントは主にchange() メソッドを使用して実装されます。このメソッドは、ドロップダウン ボックスのオプションが変更されたときにトリガーされ、Web ページ内のコンテンツの更新、特定の要素の表示または非表示などの一部の操作を実行できます。以下は、change() メソッドの使用方法を示す簡単なサンプル プログラムです。

<select id="selectBox">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<p id="result"></p>

<script>
  $('#selectBox').change(function() {
    var selectedValue = $('#selectBox option:selected').val();
    $('#result').text('您选择的是：' + selectedValue);
  });
</script>

上記のプログラムでは、最初に 3 つのオプションを含むドロップダウン ボックスが作成されます。次に、jQuery の change() メソッドを使用して、ドロップダウン ボックスのオプション変更イベントをリッスンします。オプションが変更されると、現在選択されている値を取得し、ID の結果を使用して段落に表示します。

2. バインディング イベント

change() メソッドを直接使用してドロップダウン ボックスの変更イベントをリッスンするだけでなく、bind() または on() メソッドを使用することもできます。イベントをバインドします。これら 2 つのメソッドを使用する場合は、イベント タイプとコールバック関数を指定する必要があります。

$('#selectBox').bind('change', function() {
  var selectedValue = $('#selectBox option:selected').val();
  $('#result').text('您选择的是：' + selectedValue);
});
//或者
$('#selectBox').on('change', function() {
  var selectedValue = $('#selectBox option:selected').val();
  $('#result').text('您选择的是：' + selectedValue);
});

3. 委任を使用する

ページ上に複数のドロップダウン ボックスがあり、それらに同じイベントをバインドする必要がある場合は、イベント委任を使用できます。イベント委任とは、イベントを祖先要素にバインドすることを指し、その要素の下にある子要素がイベントをトリガーすると、イベント ハンドラーが呼び出されます。この方法により、イベント バインディングの数が大幅に削減され、Web ページのパフォーマンスが向上します。

<div id="selectBoxes">
  <select class="selectBox">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <select class="selectBox">
    <option value="4">选项4</option>
    <option value="5">选项5</option>
    <option value="6">选项6</option>
  </select>
</div>

<p class="result"></p>

<script>
  $('#selectBoxes').on('change', '.selectBox', function() {
    var selectedValue = $(this).find('option:selected').val();
    $(this).next('.result').text('您选择的是：' + selectedValue);
  });
</script>

上記のコードでは、最初に祖先要素 selectBoxes が作成され、その中に 2 つのドロップダウン ボックスが配置されます。次に、要素の on() メソッドを使用して変更イベントをリッスンし、そのイベントを .class が selectBox である子要素に委任します。ドロップダウン ボックスのオプションが変更されると、現在選択されている値を取得し、次の兄弟要素の結果に表示します。

概要:

ドロップダウン ボックス変更イベント jQuery は、Web 開発でよく使用されるテクノロジの 1 つであり、このテクノロジを使用すると、Web ページのコンテンツをリアルタイムで更新または変更できます。オプションが変更されたとき。具体的な実装方法には、change() メソッドを直接使用する方法、bind() または on() メソッドを使用してイベントをバインドする方法、イベント委任の使用方法などがあります。複雑なページの場合、パフォーマンスを向上させるためにイベント委任テクノロジを使用することをお勧めします。

以上がドロップダウンボックス変更イベントjqueryの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。