셀렉트 박스 option의 텍스트 color에 맞춰 표기되는 항목 컬러 변경

 

적용 클래스 이름 : custom-color-select

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<select class="custom-color-select">
   <option value="red" style="color: red;">Red</option>
   <option value="green" style="color: green;">Green</option>
   <option value="blue" style="color: blue;">Blue</option>
   <option value="orange" style="color: orange;">Orange</option>
</select>


<script>

// 함수: 특정 셀렉트 박스의 선택된 옵션에 따라 색상 변경
function updateSelectColor(selectElement) {
    const selectedOption = $(selectElement).find('option:selected');
    const selectedColor = selectedOption.css('color');

    // 해당 셀렉트 박스의 텍스트 색상을 변경
    $(selectElement).css('color', selectedColor);
}


$(document).ready(function(){

    // 각 셀렉트 박스에 change 이벤트 리스너 추가 (컬러적용)
    $('.custom-color-select').each(function() {
        // 초기화: 첫 번째 선택된 옵션의 색상 적용
        updateSelectColor(this);

        // 변경 시 선택한 옵션의 색상으로 업데이트
        $(this).change(function() {
            updateSelectColor(this);
        });
    });
});

</script>