다중 셀렉트박스 만들기

 

 

 

 

 

 

 

■ 다중 셀렉트 박스 만들기

이전에 포스팅했던 내용을 활용하고 추가적으로 다중 셀렉트 박스를 만들어 보려고한다.

 

 

 

 

 

 

 

 

• 우선 이전에 적었던 insert, select를 활용하여 의류를 등록하고,  셀렉트 박스에서 등록한 의류 목록을 볼 수 있는 페이지를 만들었다. 이전에 적었던 내용과 비슷하여 이 부분은 따로 코드를 추가하지 않았다.

 

 

 

 

 

 

• 의류 종류를 선택하고 해당 의류에 항목을 추가할 수 있는 html을 만들어주었다. 그리고 종류의 셀렉트 박스는 기존에 사용했던 의류 등록하기 페이지에서 만들어준 코드 재사용할 수 있기에 가져와주었다.

        $(function(){
            $.ajax({
                type : "get",
                url : "/clothes/showall",
                dataType : "json",
                success : (res) => {
                    let output = "";
                    
                    res.all.forEach(e => {
                        output += `
                        <option value="${e.clothCode}">${e.clothName}</option>
                        `;
                    });
                    cloth.innerHTML = `<option value="">---의류선택---</option>` + output;
                }
            });
        });

 

 

 

 

 

 

• 항목별로 들어갈 컬럼을 추가해주었고, 등록을 눌렀을때 선택한 종류의 코드와 종류에 맞는 항목을 추가해주기 위해서 foreign key를 사용하여 clothes라는 테이블에 있는 cloth_code와 연결시켜주었다.

 

 

 

 

 

 

• 입력을 한 후 등록하기를 눌렀을때의  ajax와 js를 먼저 작성해주었다. 첫번째로 종류를 선택하지 않은 경우에는  if문에서 해당 선택한 option의 index의 value가 없으므로 "종류를 선택해주세요" 라는 창을 띄우도록 해주었다. 두번째로 해당 값을 입력 했을때의 값을 데이터로 보내줄 let obj을 만들어주었다. 마지막으로 ajax를 이용하여 /clothes/selected의 주소로 요청을 할 것이고 성공적으로 값이 들어왔을때 "항목 등록완료" 창을 띄우게 만들어주었다. 

     btn.addEventListener('click',(e) => {

            e.preventDefault();

            if(cloth.options[cloth.selectedIndex].value == ""){
                alert("종류를 선택해주세요");
                return false;
            }

            let obj = {
                selectCode : selectCode.value,
                selectName : selectName.value,
                clothCode : cloth.options[cloth.selectedIndex].value
            };

            $.ajax({
                type : "post",
                url : "/clothes/selected",
                dataType : "json",
                data : obj,
                success : (res) => {
                    if(res.msg == "success") {
                        alert("항목 등록완료");
                        location.href = "/clothes/multi";
                    }
                }
            });
        });

 

 

 

 

 

 

• Mapper에서 setSelected()에 Database에서 입력한 컬럼과 같은 dto를 만들어 객체를 넣어주고  @insert 쿼리문의 메소드인  #{} 안에 dto와 Database 필드가 일치한 필드명을 넣어주었다. 그리고 controller에서 selectedDto가 null이 아닌경우 해당 메소드를 실행하고 map에 "msg", "success"를 추가하여 return으로 반환해주었다.

    @PostMapping("/selected")
    @ResponseBody
    public Map<String,Object> setSelected(@ModelAttribute SelectedDto selectedDto) {

        Map<String,Object> map = new HashMap<>();

        if(selectedDto != null) {
            selectedMapper.setSelected(selectedDto);
            map.put("msg", "success");
        }
        return map;
    }

    @Insert("insert into selected values(#{selectCode}, #{selectName}, #{clothCode})")
    public void setSelected(SelectedDto selectedDto);

 

 

 

 

 

 

• 성공적으로 데이터가 전송되는지 확인을 해보았다. 종류에서 하의를 선택하고 항목 코드,항목 이름을 입력하여 등록을 눌렀을때 성공적으로 "항목등록완료" 창이 뜨고 Database에서도 들어간 것을 확인하였다. 

 

 

 

 

 

 

• 다중셀렉트를 확인하기위해 간단히 html을 만들었다. 첫번째 select box를 선택했을때 해당하는 두번째 항목의 종류도 나와야하는데 아직까진 두번째 select box에는 해당하는 항목이 보이지 않기때문에 추가적인 작업을 해주어야한다.

 

 

 

 

 

 

• 이전의 방식과 비슷하지만 약간의 차이점이 있다면 첫번째 select box를 종류를 선택 했을때의 해당 value 값을 ajax를 통해 data로 전송하면  controller에서 @RequestParam을 통해 파라미터 값을 받아와 Mapper의 쿼리문에 적어주어야한다. 그러므로 우선 controller와 getSelect()에 clothCode 정도만 만들어두었다.

        function getSelect() {

            let obj = {
                clothCode : cloth.options[cloth.selectedIndex].value
            };
          }

    @PostMapping("/selectend")
    @ResponseBody
    public Map<String,Object> setSelectEnd(@RequestParam String clothCode) {



        return "";
    }

 

 

 

 

 

 

• Mapper에서 @RequestParam을 통해 받은 파라미터 값을 적어 @select 쿼리문과 메소드를 만들어주었다.  추후에 코드 작성을 완료하여 실행하면 첫번째 select box의 종류를 선택하면 "select * from selected where cloth_code = '100' " 이러한 방식으로 쿼리문이 작성되어진다.  그리고 controller로 돌아와 해당 작업이 실행될 selectedMapper.setSelectEnd(clothCode)를 map에 key, value로 넣어 마무리 작업을 해주었다.

    @Select("select * from selected where cloth_code = #{clothCode}")
    public List<SelectedDto> setSelectEnd(String clothCode);

    @PostMapping("/selectend")
    @ResponseBody
    public Map<String,Object> setSelectEnd(@RequestParam String clothCode) {

        Map<String,Object> map = new HashMap<>();

        map.put("result", selectedMapper.setSelectEnd(clothCode));

        return map;
    }

 

 

 

 

 

 

• 다시 js로 돌아와 마무리 작업을 해주었다. $.ajax를 통해 성공적으로 데이터가 전송되면 return한 map의 key, value를 이용하여 foreach문으로 해당 항목이 나오도록 해주었다.

        function getSelect() {

            let obj = {
                clothCode : cloth.options[cloth.selectedIndex].value
            };

            $.ajax({
                type : "post",
                url : "/clothes/selectend",
                dataType : "json",
                data : obj,
                success : (res) => {
                    let output = "<option>--항목 선택--</option>";

                    res.result.forEach((r) => {
                        output += `
                        <option value="${r.selectCode}">${r.selectName}</option>
                        `;
                    })
                    multi.innerHTML = output;
                }
            });
        }

 

 

 

 

 

 

•  하지만 여기서 코드 작성이 끝나는 것이 아니다.  위의 코드만으로 끝을 내면 아래 사진처럼 종류를 선택하였는데도 항목이 뜨지 않는다. 두번째 사진처럼 첫번째 select태그에 onchange 이벤트를 걸어주어야한다. 왜냐하면 onchange 이벤트로 첫번째 select box를 선택하여 value 값이 변경되었을때 해당 함수가 실행되어 ajax의 data에 선택한 value값을 controller에 전송해주어 항목에 해당하는 데이터들을 return 해오기 때문이다.

 

 

 

 

 

 

 

• onchange 이벤트를 추가해준 마지막 결과이다. 종류를 선택하면 해당하는 항목들이 잘 나오는 것을 볼 수 있다.

결과

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 

Today short review 

foreign key를 사용하여 두개의 select box에 종류와 그에 해당하는 항목들까지 선택할 수 있는 이중 셀렉트 박스를 만들어보았습니다. 하다보니 메소드명이나 필드명이 아쉬운 부분도 있었고, 하나의 셀렉트를 두번 만드는것까지는 무난했으나 묶는 과정에서 순서가 살짝 헷갈리기도 했었는데 조금 정리가 된거 같기도 하다..