{"id":289,"date":"2024-07-02T15:31:22","date_gmt":"2024-07-02T06:31:22","guid":{"rendered":"https:\/\/javascript.auctionpro.co.kr\/?p=289"},"modified":"2024-07-02T15:31:26","modified_gmt":"2024-07-02T06:31:26","slug":"selectbox-color","status":"publish","type":"post","link":"https:\/\/javascript.auctionpro.co.kr\/?p=289","title":{"rendered":"Selectbox color"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"183\" src=\"https:\/\/javascript.auctionpro.co.kr\/wp-content\/uploads\/2024\/07\/image.png\" alt=\"\" class=\"wp-image-290\" srcset=\"https:\/\/javascript.auctionpro.co.kr\/wp-content\/uploads\/2024\/07\/image.png 439w, https:\/\/javascript.auctionpro.co.kr\/wp-content\/uploads\/2024\/07\/image-300x125.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-urvanov-syntax-highlighter-code-block\"><pre class=\"lang:js decode:true \" >&lt;!DOCTYPE html&gt;\n&lt;html lang=\"ko\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Select Option Color Example&lt;\/title&gt;\n    &lt;style&gt;\n        select {\n            width: 110px;\n            padding: 1px;\n            font-size: 12px;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;select id=\"NoShow_AmountType0\" name=\"NoShow_AmountType\"&gt;\n        &lt;option value=\"\"&gt;\uc5c6\uc74c&lt;\/option&gt;\n        &lt;option value=\"DA\"&gt;\ucd9c\ubc1c\ub2f9\uc77c&lt;\/option&gt;\n        &lt;option value=\"DD\"&gt;\ucd9c\ubc1c\uc77c\uae30\uc900&lt;\/option&gt;\n        &lt;option value=\"DH\" selected&gt;\ucd9c\ubc1c\uc2dc\uac04\uae30\uc900&lt;\/option&gt;\n    &lt;\/select&gt;\n\t\n\t&lt;select id=\"NoShow_AmountType1\" name=\"NoShow_AmountType\"&gt;\n        &lt;option value=\"\"&gt;\uc5c6\uc74c&lt;\/option&gt;\n        &lt;option value=\"DA\"&gt;\ucd9c\ubc1c\ub2f9\uc77c&lt;\/option&gt;\n        &lt;option value=\"DD\" selected&gt;\ucd9c\ubc1c\uc77c\uae30\uc900&lt;\/option&gt;\n        &lt;option value=\"DH\"&gt;\ucd9c\ubc1c\uc2dc\uac04\uae30\uc900&lt;\/option&gt;\n    &lt;\/select&gt;\n\t\n\t&lt;select id=\"AmountType1\" name=\"AmountType\"&gt;\n        &lt;option value=\"Y\"&gt;Y&lt;\/option&gt;\n        &lt;option value=\"N\"&gt;N&lt;\/option&gt;\n        \n    &lt;\/select&gt;\n\t\n\n&lt;script&gt;\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \/\/ Select all select elements with id starting with \"NoShow_AmountType\"\n            var selects = document.querySelectorAll('select[id^=\"NoShow_AmountType\"], select[id^=\"AmountType\"]');\n\n            \/\/ Function to update the color of the select element\n            function updateSelectColor(select) {\n                var selectedOption = select.options[select.selectedIndex];\n                switch (selectedOption.value) {\n                    case 'DA':\n                        select.style.backgroundColor = 'Crimson';\n                        select.style.color = 'white';\n                        break;\n\t\t\t\t\tcase 'N':\n                        select.style.backgroundColor = 'Crimson';\n                        select.style.color = 'white';\n                        break;\t\n                    case 'DD':\n                        select.style.backgroundColor = 'DarkGreen';\n                        select.style.color = 'white';\n                        break;\n\t\t\t\t\tcase 'Y':\n                        select.style.backgroundColor = 'DarkGreen';\n                        select.style.color = 'white';\n                    case 'DH':\n                        select.style.backgroundColor = 'DarkBlue';\n                        select.style.color = 'white';\n                        break;\n                    default:\n                        select.style.backgroundColor = '';\n                        select.style.color = '';\n                        break;\n                }\n            }\n\n            \/\/ Initialize the select background color and add event listener for each select\n            selects.forEach(function(select) {\n                updateSelectColor(select);\n                select.addEventListener('change', function() {\n                    updateSelectColor(select);\n                });\n            });\n        });\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-289","post","type-post","status-publish","format-standard","hentry","category-tip"],"_links":{"self":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=289"}],"version-history":[{"count":1,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":291,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/289\/revisions\/291"}],"wp:attachment":[{"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascript.auctionpro.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}