<select> 태그 multiple로 다중 선택하고, DB에 저장한 값 가져와서 셋팅하기

부트스트랩 필수로 필요함

 

상황 : select박스에서 여러개의 값을 입력받고 그 값을 DB에서 1,3,5... 이런식의 String 형으로 저장함, 추후 저장된 값을 select박스에서 selected된 option으로도 뿌려줘야 함

 

1. html 소스 : 나는 타임리프를 사용해서 th:each로 뿌려줬다

<select id="selectId" multiple data-live-search="true">
	<option th:each~~> //DB에서 받아온 값들을 가지고 동적으로 여러개의 option 태그 뿌려줌
</select>

 

 

2. 자바스크립트 소스 : multiple로 받은 option의 value들을 배열로 넣어 백단으로 보내기

// multiple로 받은 option의 value들을 배열로 넣기
var selectedValues = [];
var selectElement = document.getElementById("selectId");
for (var option of selectElement.options) {
    if (option.selected) {
        selectedValues.push(option.value);
    }
}
// 배열에 담긴 값들을 ,구분자로 해서 String 형식으로 만들어줌
var goToBackValues = selectedValues.join(',');

//이제 goToBackValues 이 값을 ajax등의 방식으로 백단에 보내주면 된다.
//그럼 value1,value2,value3... 이렇게 String형식으로 받을 수 있음

 

 

3. 자바스크립트 소스 : DB에 저장된 String형식의 값들을(value1,value2,value3...) 다시 multiple option selected값으로 가져오기

$(function() {
    // DB에서 값을 가져와서 select 박스에 multiple로 selected 되게함
    // backData 형태 ['1','2',...] 등으로 배열로 담아옴
    var backData = [[${백단에서 가져와 모델에 담은 파라미터}]];
    
    // option value 변경을 select2 플러그인한테 알려줌
    $("#selectId").val(backData).trigger("change");
});

 

 

4. 결과 이미지

세가지 값을 모두 선택했을 때

한가지 값 선택 해제