개발자.. 너란놈..

Select와 Option으로 사용 시 스타일링의 어려움이 있기 때문에 아래와 같이 ul 과 li로 구성 하였습니다.

HTML

<div class="dropdown">
    <div class="dropdown-selected">Select an option</div>
    <ul class="dropdown-options">
        <li data-value="1">Option 1</li>
        <li data-value="2">Option 2</li>
        <li data-value="3">Option 3</li>
        <li data-value="4">Option 4</li>
    </ul>
</div>

CSS (SASS)

.dropdown {
    position: relative;
    width: 250px;

    /* 선택된 항목 표시 */
    .dropdown-selected {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        cursor: pointer;
        font-size: 16px;
        color: #333;
    }

    /* 화살표 표시 */
    .dropdown-selected::after {
        content: "▼";
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        font-size: 12px;
        color: #333;
    }

    /* 옵션 목록 */
    .dropdown-options {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        width: 100%;
        border: 1px solid #ccc;
        background-color: #fff;
        z-index: 100;
        border-radius: 4px;
        max-height: 150px;
        overflow-y: auto;

        &.show {
            display: show;
        }

        /* 옵션 항목 */
        li {
            padding: 10px;
            cursor: pointer;

            /* 호버 및 선택된 항목 스타일 */
            &:hover{
                background-color: #007bff;
                color: #fff;
            }

            &.selected{
                background-color: #007bff;
                color: #fff;
            }
        }
    }
}

아래는 참고용으로 Vue로 Select Option을 제대로 이벤트 동작하게끔 하기 위해 정리합니다.

Vue

<div class="dropdown" ref="dropdown">
    <div class="dropdown-selected" @click="toggleDropdown">Select an option</div>
    <ul class="dropdown-options" v-if="isOpen">
        <li data-value="1" @click="selectOption(1)">Option 1</li>
        <li data-value="2" @click="selectOption(2)">Option 2</li>
        <li data-value="3" @click="selectOption(3)">Option 3</li>
        <li data-value="4" @click="selectOption(4)">Option 4</li>
    </ul>
</div>

export default{
	data() {
        return {
            isOpen:false
        }
    },
    methods: {
    	toggleDropdown() {
            this.isOpen = !this.isOpen;
        },
        selectOption(option) {
            this.selectedText = option.text;
            this.isOpen = false;
        },
        handleClickOutside(event) {
            // dropdown 외부 클릭 시 드롭다운 닫기
            if (!this.$refs.dropdown.contains(event.target)) {
                this.isOpen = false;
            }
        }
    },
    mounted() {
        document.addEventListener('click', this.handleClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside);
    },    
}

똑같은 Name으로 2개의 Select가 있을 경우 Change 함수를 이용하여 한번에 2개 데이터를 바꾸고, Selected 값도 바꾸는 로직

$(document).on("change", "select[name='select_SolutionQ_Email']", function () {
	//pc와 mo의 데이터 동기화
	$("input[name='SolutionQ_Email2']").eq(0).val($(this).find('option:selected').val()); //pc
	$("input[name='SolutionQ_Email2']").eq(1).val($(this).find('option:selected').val()); //mo

	//선택한 값의 index 번호를 가져와서 동일한 name의 select 태그의 index의 option으로 selected 시켜주는 로직 입니다.
	$("select[name='select_SolutionQ_Email']").eq(0).find("option").eq($(this).find('option:selected').index()).attr('selected', 'selected');
	$("select[name='select_SolutionQ_Email']").eq(1).find("option").eq($(this).find('option:selected').index()).attr('selected', 'selected');
});