jQuery를 사용한 선택된 옵션 가져오기

jQuery를 사용하면 <select> 요소에서 선택된 옵션을 쉽게 가져올 수 있습니다. 선택된 옵션이란 사용자가 드롭다운 목록에서 선택한 옵션을 말합니다. 아래 예제를 통해 jQuery를 사용하여 선택된 옵션을 다루는 방법을 알아보겠습니다.

예제 1: 선택된 옵션의 값을 가져와서 출력하기

$(document).ready(function() {
    var selectedOption = $("select option:selected").val();
    console.log("선택된 옵션의 값:", selectedOption);
});

이 예제는 페이지에서 모든 <select> 요소에서 선택된 옵션의 값을 가져와서 콘솔에 출력합니다.

예제 2: 선택된 옵션의 텍스트 가져와서 화면에 표시하기

$(document).ready(function() {
    var selectedText = $("select option:selected").text();
    $("#result").text("선택된 옵션: " + selectedText);
});

이 예제는 페이지에서 모든 <select> 요소에서 선택된 옵션의 텍스트를 가져와서 id가 "result"인 요소에 표시합니다.

예제 3: 선택된 옵션의 속성 값 가져오기

$(document).ready(function() {
    var selectedAttr = $("select option:selected").attr("data-info");
    console.log("선택된 옵션의 추가 정보:", selectedAttr);
});

이 예제는 페이지에서 모든 <select> 요소에서 선택된 옵션의 data-info 속성 값을 가져와서 콘솔에 출력합니다.