자바스크립트 멀티셀렉트 박스 선택 이벤트

오늘은 자바스크립트 멀티셀렉트 박스 선택 이벤트에 대해 알아보겠습니다. 쉽게 말하면 첫번째 선택박스에서 옵션 하나를 선택하면 두번째 선택박스의 옵션이 그에 맞게 활성화 되는 것입니다.

첫번째 셀렉트박스에서 영업부문을 선택하면 두번째 셀렉트박스에서 그에 해당하는 “국내영업팀, 해외영업팀, 영업관리팀”이 나타나도록 하는 것입니다. 이걸 멀티셀렉트라고 하기는 했는데 이게 맞는 말인지는 모르겠습니다.

보통 멀티셀렉트라고 하면 다중 선택을 말하는데 위와 같은 것은 뭐라고 말하는 지 모르겠네요.

자바스크립트 멀티셀렉트 핵심

먼저, 첫번째 셀렉트 박스의 옵션 항목은 데이터를 받아서 자동으로 만들어주는 함수를 만들어줍니다.

첫번째 셀렉트 박스가 변하게되면(onchange) 두번째 셀렉트박스의 옵션을 항목을 자동으로 만들어주는 함수를 첫번째 셀렉트박스 안에 onchange속성으로 넣어줍니다.

<select id="sel_one" onchange="com_child();"></select>
<select id="sel_two"></select>
Code language: HTML, XML (xml)

이 두가지가 핵심이고 나머지는 별 특이한 것이 없습니다. 코드는 아래쪽에 넣겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select id="sel_one" onchange="com_child();"></select>
    <select id="sel_two"></select>

    <script>
    let parents =[
        {v:"",m:""},
        {v:"1",m:"경영부문"},
        {v:"2",m:"영업부문"},
        {v:"3",m:"생산부문"}
        ];

    let child1 =[{v:"11",m:"기획팀"},{v:"12",m:"경리팀"},{v:"13",m:"총무팀"},];
    let child2 =[{v:"21",m:"국내영업팀"},{v:"22",m:"해외영업팀"},{v:"23",m:"영업관리팀"},];
    let child3 =[{v:"31",m:"국내공장팀"},{v:"32",m:"해외공장팀"},{v:"33",m:"물류재고팀"},];


    function com_parent(){
        let opt = [];
        parents.forEach(data =>{
            opt.push(`<option value="${data.v}">${data.m}</option>`);
        });
        document.getElementById("sel_one").innerHTML = opt.join("");
    }
    
    
    function com_child(){
        let opt = [];
        let oneSel = document.getElementById("sel_one").value;
        
        console.log(oneSel);
        if( oneSel == ""){
        }else {
            if( oneSel == "1"){
                child1.forEach(data =>{
                    opt.push(`<option value="${data.v}">${data.m}</option>`);
                });
            }else if( oneSel == "2"){
                child2.forEach(data =>{
                    opt.push(`<option value="${data.v}">${data.m}</option>`);
                });
            }else if( oneSel == "3"){
                child3.forEach(data =>{
                    opt.push(`<option value="${data.v}">${data.m}</option>`);
                });
            }
        }
        document.getElementById("sel_two").innerHTML = opt.join("");
    }
    com_parent();
    </script>
</body>
</html>
Code language: HTML, XML (xml)

건강 조심하세요. 엄청 춥습니다.

자바스크립트 멀티셀렉트 핵심

답글 남기기 응답 취소