ProgrammingLanguageJavaScript

[JQuery] Select Box 제어

, ,

JQuery를 이용해서 select를 제어하는 방법에 대해 알아보겠습니다.

1
<select class="form-control" name="name" id="nameSelect"></select>

선택된 옵션 값 읽기

1
2
$('#nameSelect option:selected').val();
$('select[name=name]').val();

선택된 옵션 이름 읽기

1
$('#nameSelect option:selected').text();

옵션 추가하기

1
2
3
4
5
6
$('#nameSelect').append(
  $('<option>', {
    value: 1,
    text: '테스트',
  })
);

값이 변경되었을 때

1
2
3
4
$('#nameSelect').change(function () {
  const name = $(this).val();
  console.log(name);
});

특정한 값 선택하기

1
$('#nameSelect').val(1).trigger('change');

옵션 삭제

1
2
3
4
5
6
7
8
// 지정한 인덱스의 옵션 삭제
$('#nameSelect option:eq(0)').remove();

// 첫 번째 옵션 삭제
$('#nameSelect option:first').remove();

// 마지막 옵션 삭제
$('#nameSelect option:first').remove();

Select Box 비우기

1
$('#nameSelect').empty();
Share