jquery에서 선택 변경 이벤트를 바인딩하는 방법

jquery를 사용하여 선택 변경 이벤트를 바인딩하는 방법: 1. jQuery 샘플 파일을 만듭니다. 2. "$('select')" 선택기를 사용하여 모든 선택 요소를 선택한 다음 "on( )" 메서드; 3. . 이벤트 발생 후 콜백 함수는 ".val()" 및 ".find(':selected')" 메서드를 사용하여 선택한 항목의 값과 텍스트를 가져옵니다. 4. 콘솔 선택한 콘텐츠를 출력하거나 페이지에 표시합니다. 그냥 나오세요.

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.0, Dell G3 컴퓨터.

jQuery를 사용하면 간단히 변경 이벤트를 바인딩하여 선택 요소의 변경 사항을 수신할 수 있습니다.

다음 코드를 사용하여 구현되었습니다.

$(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') 선택기를 사용하여 모든 선택 요소를 선택한 다음 on() 메서드가 해당 요소에 변경 이벤트를 바인딩합니다. 사용자가 선택 요소에서 옵션을 선택하면 콜백 함수가 트리거됩니다.

콜백 함수는 먼저 선택한 항목의 값과 텍스트를 가져옵니다. 여기서는 .val() 및 .find(':selected') 메서드가 사용됩니다. 그런 다음 선택한 콘텐츠를 콘솔에 출력하거나 페이지에 표시할 수 있습니다(해당 요소의 .text() 수정).

페이지의 특정 선택 요소에 대해 작업을 수행하려면 해당 ID나 클래스 이름과 같은 선택기를 기준으로 선택하세요. 예: $('#my-select') 또는 $('.my-select').

위 내용은 jquery에서 선택 변경 이벤트를 바인딩하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!