[JQuery] HTML < select > 값 가져오기, 선택하기

HTML <select> 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. JQuery를 사용하여 <select> 안의 메뉴인 <option>의 값을 가져와보고 선택해보겠습니다.

<select name="pets" id="pet-select">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
</select>

 

값 가져오기

$("select").val(); 
$("#pet-select").val(); //id로 접근
$("select[name='pets']").val(); //속성으로 접근

 

text 가져오기

$("select option:selected").text(); 
$("#pet-select option:selected").text();
$("select[name='pets'] option:selected").text();

 

특정 값 선택하기

$('select option[value="{findval}"').prop("selected", true);

 

 

 

참조

• <select> - HTML: Hypertext Markup Language | MDN (mozilla.org)