[jQuery] 제이쿼리 Select box(셀렉트 박스) 선택 값 제어 방법

[문제]

jQuery 를 사용하던 중, Select box 의 제어가 필요하다.

[목표]

jQuery 를 사용해, Select box 를 제어하는 방법을 알아본다.

[해결]

Select box(셀렉트 박스) 선택 값 제어

// Select box ID 로 접근하여 선택된 값 읽기
$('#Select box ID option:selected').val();

// Select box Name 으로 접근하여 선택된 값 읽기
$('select[name=Select box Name]').val();

// span 과 같은 다른 태그 접근하기
$('span[name=Name값]').text();

// 선택된 값의 index 불러오기
var index = $('#Select box ID option').index($('#Select box ID option:selected'));

// Select box에 option 값 추가하기
$('#Select box ID').append('<option value='1'>1번</option>');

// Select box option 의 맨 앞에 추가 하기
$('#Select box ID').prepend('<option value='0'>0번</option>');

// Select box의 html 전체를 변경하기
$('#Select box ID').html('<option value='1'>1차</option><option value='2'>2차</option>');

// Select box의 index 별 replace 하기
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어, 개별 개체를 선택할 수 있다.
$('#Select box ID option:eq(1)').replaceWith('<option value='1'>1차</option>');

// 직접 index 값을 주어 selected 속성 주기
$('#셀렉트ID option:eq(1)').attr('selected', 'selected');

// text 값으로 selected 속성 주기(첫 번째 방법)
$('#Select box ID')val('1번').attr('selected', 'selected');

// text 값으로 selected 속성 주기(두 번째 방법)
$('#Select box ID').text('1번').attr('selected', 'selected');

// value 값으로 selected 속성 주기(첫 번째 방법)
$('#Select box ID').val('1');

// value 값으로 selected 속성 주기(두 번째 방법)
$('#id').val('1').prop('selected', true);

// 해당 index item 삭제하기
$('#Select box ID option:eq(0)').remove();

// 첫번째, 마지막 item 삭제하기
$('#Select box ID option:first').remove();
$('#Select box ID option:last').remove();

// 선택된 옵션의 text, value 구하기
$('#Select box ID option:selected').text();
$('#Select box ID option:selected').val();

// 선택된 옵션의 index 구하기
$('#Select box ID option').index($('#Select box ID option:selected'));

// Select box 의 아이템 갯수 구하기
$('#Select box ID option').size();

// 선택된 옵션 전 까지의 item 갯수 구하기
$('#Select box ID option:selected').prevAll().size();

// 선택된 옵션 후의 item 갯수 구하기
$('#Select box ID option:selected').nextAll().size();

// 해당 index item 이후에 option item 추가 하기
$('#Select box ID option:eq(0)').after('<option value='3'>3번</option>');

// 해당 index item 전에 option item 추가하기
$('#Select box ID option:eq(3)').before('<option value='2'>2번</option>');

// 해당 Select box 에 change event binding 하기
$('#Select box ID').change(function() {
  alert($(this).val());
  alert($(this).children('option:selected').text());
});

 

- 끝 -