jquery 模拟select下拉框多选

<div class="custom-select">
    <div class="selected-options">
        <span>请选择</span>
        <i class="arrow"></i>
    </div>
    <div class="options">
        <div class="option">选项1</div>
        <div class="option">选项2</div>
        <div class="option">选项3</div>
    </div>
</div>

.custom-select {
    position: relative;
    width: 200px;
}

.selected-options {
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
}

.options {
    display: none;
    position: absolute;
    width: 100%;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
}

.option {
    padding: 8px;
    cursor: pointer;
}

.option:hover {
    background-color: #f0f0f0;
}

$(document).ready(function() {
    $('.selected-options').click(function() {
        $('.options').toggle();
    });

    $('.option').click(function() {
        var selectedText = $(this).text();
        if ($('.selected-options span').text() === '请选择') {
            $('.selected-options span').text(selectedText);
        } else {
            $('.selected-options span').text($('.selected-options span').text() + ', ' + selectedText);
        }
        $(this).hide();
    });
});