프로그래밍/Front end
[Front end] jQuery select 제어
Reference M1
2019. 7. 11. 08:52
//전체 삭제
$('#elementId option').remove();
//특정 옵션 삭제
$('#elementId option[value=값]').remove();
//특정 인덱스 옵션 삭제
$('#elementId option:eq(2)').remove();
//첫번째 옵션 삭제
$("#elementId option:first").remove();
//마지막 옵션 삭제
$("#elementId option:last").remove();
//끝부분에 옵션 추가
$('#elementId').append('<option value=값>옵션</option>');
//시작부분에 옵션 추가
$('#elementId').preppend('<option value=값>옵션</option>');
//특정 인덱스 옵션 대체
$('#elementId option:eq(2)').replaceWith('<option value=값>옵션</option>');
//선택된 옵션
$('#elementId option:selected').val();
//선택된 텍스트
$('#elementId option:selected').text();
//옵션 선택
$('#elementId option[value=값]').attr('selected', 'selected');
$('#elementId').val('값');
$('#elementId').val('값').prop('selected', true);
//disabled 설정
$('#elementId').prop('disabled', true);
//disabled 해제
$('#elementId').prop('disabled', false);
//disabled 반전
$('#elementId').prop('disabled', !$('#elementId').prop('disabled'));
//옵션 disabled 설정
$('#elementId option[value=값]').prop('disabled', true);
//옵션 disabled 해제
$('#elementId option[value=값]').prop('disabled', true);
//전체 옵션 disabled 설정
$('#elementId option').each(function() {
$(this).prop('disabled', true);
});
//전체 옵션 disabled 해제
$('#elementId option').each(function() {
$(this).prop('disabled', false);
});
//선택된 옵션의 index
$('#elementId option:selected').index();
//전체 개수
$('#elementId option').length;
//선택된 옵션 개수
$("#elementId").change(function() {
var length = $(this).children(":selected").length;
});