# jQuery로 만드는 커스텀 다중 선택 select 박스! (라이브러리 X)

일반 <select multiple> 태그는 브라우저마다 디자인이 달라서 커스터마이징이 어렵다.
이번 글에서는 커스텀 드롭다운 박스를 만들어서 체크박스로 여러 개를 선택할 수 있고,
선택한 값이 상단에 표시되며, 길어지면 ... 으로 잘리고 hover 시 툴팁으로 전체 값을 보여주는 기능까지 구현한다.

 

See the Pen Untitled by note (@somieee) on CodePen.

1.HTML 구조

<div class="custom-select" id="fruitSelect">
    <span class="selected">과일 선택</span>
    <div class="options">
        <label><input type="checkbox" class="fruit-checkbox" value="사과"> 사과</label>
        <label><input type="checkbox" class="fruit-checkbox" value="바나나"> 바나나</label>
        <label><input type="checkbox" class="fruit-checkbox" value="포도"> 포도</label>
        <label><input type="checkbox" class="fruit-checkbox" value="딸기"> 딸기</label>
        <label><input type="checkbox" class="fruit-checkbox" value="수박"> 수박</label>
    </div>
</div>

 

2.CSS 스타일

.custom-select {
    width: 200px;
    border: 1px solid #ccc;
    cursor: pointer;
    position: relative;
}

.custom-select .selected {
    display: block;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 길면 ... */
}

.custom-select .options {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
}

.custom-select .options label {
    display: block;
    padding: 5px;
    cursor: pointer;
}

3. jQuery 기능

$(function () {
    // 드롭다운 열기/닫기
    $(document).on("click", ".custom-select", function (e) {
        e.stopPropagation();
        $(".custom-select .options").not($(this).find(".options")).hide();
        $(this).find(".options").toggle();
    });

    // 체크박스 클릭 시 닫히지 않도록
    $(document).on("click", "#fruitSelect .options input[type=checkbox], #fruitSelect .options label", function (e) {
        e.stopPropagation();
    });

    // 바깥 클릭하면 닫기
    $(document).click(function () {
        $(".custom-select .options").hide();
    });

    // 체크박스 선택 시 선택된 값 표시 + title 툴팁
    $(document).on("change", "#fruitSelect .fruit-checkbox", function () {
        let selected = [];
        $("#fruitSelect .fruit-checkbox:checked").each(function () {
            selected.push($(this).val());
        });

        if (selected.length > 0) {
            let joined = selected.join(", ");
            $("#fruitSelect .selected")
                .text(joined)
                .attr("title", joined);
        } else {
            $("#fruitSelect .selected")
                .text("과일 선택")
                .removeAttr("title");
        }
    });
});

동작 예시

• 여러 개 선택 →
  사과, 바나나, 포도, ...
• 마우스 hover →
  툴팁에 사과, 바나나, 포도 전체 표시

 

이렇게 하면 Ajax로 데이터를 동적으로 불러오는 방식도 적용 가능하며 한번에 데이터를 넘길 때 사용하기 좋다.