[HTML] selectbox control (jQuery)

select box를 jQuery로 제어할 때, 맨날 헷갈리는 그것들 한방에 정리

 

HTML

<div class="select-box">
    <label for="">전체</label>
    <select class="select_box" id="select" th:field="${paging.searchSnackCd}">
        <option value="" selected>전체</option>
        <option value="1">꼬깔콘</option>
        <!-- back단에서 data 가져오는 경우 -->
        <option th:each="row : ${snackList}" th:value="${row.snackCd}" th:text="${row.snackNm}"></option>
    </select>
</div>

 

jQuery

A 라는 value를 가지고 있는 option = A 선택

$("#select").val("A").prop("selected", true);

 

위 코드의 선택이 되지 않을 때, 값 설정 및 변경 이벤트 트리거

$("#select").val("A").trigger("change");

 

현재 select box 선택값 가져오기

$('#select option:selected').val();

 

select box 선택 전체 초기화 (첫번째 옵션 강제 선택)

$("#select").find("option:eq(0)").prop("selected", true);

 

select box 옵션 값 초기화

$("#select").empty();

 

select box 옵션 값 초기화 후 신규 삽입 (data 옵션도 활용)

$("#select").empty();
$("#select").append("<option value='' selected>전체</option>");
$.each(result.data.snackList, function(key, value) {
    $("#select").append("<option value='" + value.snackCd + "' data-snackCount='" + value.snackCount + "'>" + value.snackNm + "</option>");
});