개발노트
목록
[jQuery] Select Box option 추가 및 삭제방법
jQuerySelectOptionappendremove
jQuery 2024.04.11 99 회 읽음
jQuery 24.04.11 99

카테고리나 분류를 선택할 때 자주 사용하는 화면이 Select 라는 항목입니다.

단일 Select의 경우가 아닌 1차를 선택해야 2차가 표시되는 작업을 웹사이트 제작에서 많이 사용합니다. 


Select 선택한 값 얻기

console.log( $('#셀렉트박스ID option:selected').text() ); // 선택된 selected 표시한 얻기
console.log( $('#셀렉트박스ID option:selected').val() ); //선택된 selected value 얻기


Select 추가하기

$('#셀렉트박스ID').append("<option value='2'>2번째 옵션</option>"); // 2번째 옵션추가
$(''#셀렉트박스ID').val("2").prop("selected","selected"); //2번째 옵션 선택
$('#셀렉트박스ID option:eq(n)').after("<option value='n+1'>n+1번째 값</option"); // n번째 다음에 추가
$('#셀렉트박스ID option:eq(n)').before("<option value='n+1'>n+1번째 값</option"); // n번째 이전에 추가


Select 요소 삭제하기

$('#셀렉트박스ID option:first').remove(); // 첫번째 option 삭제
$('#셀렉트박스ID option:last').remove(); // 마지막째 option 삭제
$('#셀렉트박스ID option:eq(n)').remove(); // n번째 option 삭제 $("#셀렉트박스ID").children('option:not(:first)').remove(); //첫번째 option 빼고 모두 삭제







목록