Selectbox color


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Select Option Color Example</title>
    <style>
        select {
            width: 110px;
            padding: 1px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <select id="NoShow_AmountType0" name="NoShow_AmountType">
        <option value="">없음</option>
        <option value="DA">출발당일</option>
        <option value="DD">출발일기준</option>
        <option value="DH" selected>출발시간기준</option>
    </select>
	
	<select id="NoShow_AmountType1" name="NoShow_AmountType">
        <option value="">없음</option>
        <option value="DA">출발당일</option>
        <option value="DD" selected>출발일기준</option>
        <option value="DH">출발시간기준</option>
    </select>
	
	<select id="AmountType1" name="AmountType">
        <option value="Y">Y</option>
        <option value="N">N</option>
        
    </select>
	

<script>
        document.addEventListener("DOMContentLoaded", function() {
            // Select all select elements with id starting with "NoShow_AmountType"
            var selects = document.querySelectorAll('select[id^="NoShow_AmountType"], select[id^="AmountType"]');

            // Function to update the color of the select element
            function updateSelectColor(select) {
                var selectedOption = select.options[select.selectedIndex];
                switch (selectedOption.value) {
                    case 'DA':
                        select.style.backgroundColor = 'Crimson';
                        select.style.color = 'white';
                        break;
					case 'N':
                        select.style.backgroundColor = 'Crimson';
                        select.style.color = 'white';
                        break;	
                    case 'DD':
                        select.style.backgroundColor = 'DarkGreen';
                        select.style.color = 'white';
                        break;
					case 'Y':
                        select.style.backgroundColor = 'DarkGreen';
                        select.style.color = 'white';
                    case 'DH':
                        select.style.backgroundColor = 'DarkBlue';
                        select.style.color = 'white';
                        break;
                    default:
                        select.style.backgroundColor = '';
                        select.style.color = '';
                        break;
                }
            }

            // Initialize the select background color and add event listener for each select
            selects.forEach(function(select) {
                updateSelectColor(select);
                select.addEventListener('change', function() {
                    updateSelectColor(select);
                });
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Select Option Color Example</title>

<style>

select {

width: 110px;

padding: 1px;

font-size: 12px;

}

</style>

</head>

<body>

<option value="DD">출발일기준</option>

<option value="DH" selected>출발시간기준</option>

</select>

<option value="DD" selected>출발일기준</option>

<option value="DH">출발시간기준</option>

</select>

</select>

document.addEventListener("DOMContentLoaded", function() {

// Select all select elements with id starting with "NoShow_AmountType"

var selects = document.querySelectorAll('select[id^="NoShow_AmountType"], select[id^="AmountType"]');

// Function to update the color of the select element

function updateSelectColor(select) {

var selectedOption = select.options[select.selectedIndex];

switch (selectedOption.value) {

case 'DA':

select.style.backgroundColor = 'Crimson';

select.style.color = 'white';

break;

case 'N':

select.style.backgroundColor = 'Crimson';

select.style.color = 'white';

break;

case 'DD':

select.style.backgroundColor = 'DarkGreen';

select.style.color = 'white';

break;

case 'Y':

select.style.backgroundColor = 'DarkGreen';

select.style.color = 'white';

case 'DH':

select.style.backgroundColor = 'DarkBlue';

select.style.color = 'white';

break;

default:

select.style.backgroundColor = '';

select.style.color = '';

break;

}

// Initialize the select background color and add event listener for each select

selects.forEach(function(select) {

updateSelectColor(select);

select.addEventListener('change', function() {

updateSelectColor(select);

});

</script>

</body>

</html>

javascript

javascript.auctionpro.co.kr

javascript

댓글

답글 남기기 응답 취소