jQuery Selector 다루기

프로젝트를 진행하면서 지금껏 다뤄보지 않았던 상황을 마주했다. 두 개의 Select 태그와 하나의 Input(text) 태그가 있다.

 

1. 1번 Selector의 value를 사용하여 ajax function을 이용하여 2번 Selector의 label, value를 동적으로 변경한다. 2번 Selector는 기본적으로 비활성화 되어있고, 1번 Selector의 Option을 선택하면 2번 Selector가 활성화된다.

2. 2번 Selector의 label을 기반으로 Input의 value를 자동으로 채울 수 있도록 한다.

 

2번은 간단하게 다음과 같은 짧은 코드로 해결할 수 있었다.

 

function setInputTag(value){
    $("#InputTag").val($("#secondSelector option:selected").text());    
}

 

1번 전체 구문은 다음과 같이 작성하였다.

 

function jquerySelectOption(value){
    $("#secondSelector").prop("disabled", false);
    $("#secondSelector option:not(option:eq(0))").remove();
    $.ajax({
        type: "POST",
        url:"~~~",
        dataType:"json",
        data:{
            firstSelectorValue : value
        },
        success: function(data) {
            for (var x=0; x < data["resultList"].length; x++) {
                $("#secondSelector").append("<option value='"+ data["resultList"][x]["resultValue"] +"'>" + data["resultList"][x]["resultLabel"] + "</option>");
            }
        },
        error: function(data) {
            console.log(JSON.stringify(data))
        }
    });
}

 

 

1번의 조건 중 1번 Selector의 값이 설정될 때 2번 Selector를 활성화시켜야 한다는 조건이 있었다. 이를 위해 함수가 실행될 때, prop 함수 안에 "disabled", false 를 인자로 넣어주어 비활성화되어있는 Selector를 간단하게 활성화 시켜줄 수 있다.

 

 

1번 Selector의 Value를 기반으로 쿼리를 실행하고, 그 쿼리를 통해 얻은 Object List를 JSON안에 담아서 받은 것이다. 그 Object List를 반복문과 append 함수를 이용하여 손쉽게 Select Option들을 추가해줄 수 있었다.

 

 

또, append 함수를 사용하였기에 1번 Selector에서 여러번 값을 변경하게되면 Select Option들이 끊임없이 늘어나는 현상을 발견하였다. 이를 방지하기 위해서 remove 함수와, 조건으로 option:not(option:eq(0)) 을 넣어주어 첫 번째 option으로 되어있는 "선택하세요" option 외에는 함수 실행 시마다 먼저 삭제될 수 있도록 하였다.

 

 

출처:
https://jjeongil.tistory.com/1035
https://myclude.tistory.com/entry/JQuery-%EC%85%80%EB%A0%89%ED%8A%B8-%EB%B0%95%EC%8A%A4-%EC%84%A0%ED%83%9D-%EB%AC%B8%EC%A0%9C