jQuery Select Box 컨트롤 (내용 추가, 삭제 등)

jQuery로 옵션 생성

$('#selectBox').html("<option value='1'>1번째 옵션</option><option value='2'>2번째 옵션</option>");

 

선택된(selected) 내용 읽기

console.log($('#selectBox option:selected').text());

 

선택된(selected) 옵션 값(value) 가져오기

console.log($('#selectBox option:selected').val());

 

옵션 추가

$('#selectBox').append("<option value='3'>3번째 옵션</option>");

 

selected 속성 추가

$('#selectBox').val("3").prop("selected","selected");

 

첫번째 option 삭제

$('#selectBox option:first').remove();

 

마지막 option 삭제

$('#selectBox option:last').remove();

 

n번째 option 삭제   //n에 숫자 입력

$('#selectBox option:eq(n)').remove();

 

n번째 option 뒤에 삽입

$('#selectBox option:eq(n)').after("<option value='n+1'>n+1번째 값</option");

 

n번째 option 앞에 삽입

$('#selectBox option:eq(n)').before("<option value='n+1'>n+1번째 값</option");

 

옵션을 선택했을 때(옵션이 바꼇을 때)

$('#selectBox').change(function(){ 내용... });