Drop down box change event jquery

Drop-down box change event jQuery is a technology widely used in web development. In web design, it is often necessary to use drop-down boxes to select different options. You can use jQuery to trigger corresponding events when the drop-down box options change, so as to update or change the content of the web page in real time. The following will introduce how to use jQuery to implement drop-down box change events.

1. Basic operations

In jQuery, drop-down box change events are mainly implemented using the change() method. This method is triggered when the drop-down box option changes and can perform some operations, such as updating the content in the web page, showing or hiding certain elements, etc. The following is a simple sample program that demonstrates how to use the change() method:

<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>

In the above program, a drop-down box is first created, which contains three options. Next, use jQuery's change() method to listen for the option change event of the drop-down box. When the option changes, get the currently selected value and display it in the paragraph with id result.

2. Binding events

In addition to directly using the change() method to listen to the drop-down box change event, you can also use the bind() or on() method to bind the event. These two methods need to specify the event type and callback function when using them.

$('#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. Use delegation

If there are multiple drop-down boxes on the page and you need to bind the same event to them, you can use event delegation. Event delegation refers to binding an event to an ancestor element. When a child element under the element triggers the event, the event handler will be called. This method can greatly reduce the number of event bindings and improve the performance of web pages.

<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>

In the above code, an ancestor element selectBoxes is first created and two drop-down boxes are placed in it. Then, use the on() method on the element to listen for the change event and delegate the event to the child element whose .class is selectBox. When the option of the drop-down box changes, get the currently selected value and display it in the next sibling element.result.

Summary:

Drop-down box change event jQuery is one of the commonly used technologies in web development. Using this technology, you can update or change the content of the web page in real time when the options change. Specific implementation methods include directly using the change() method, using the bind() or on() method to bind events, and using event delegation. For complex pages, it is recommended to use event delegation technology to improve performance.

The above is the detailed content of Drop down box change event jquery. For more information, please follow other related articles on the PHP Chinese website!