jefkin Posted February 7, 2006 Share Posted February 7, 2006 Hi everyone, Just wanted to make my first post here count. A) Everytime I have a tough issue with web design/programing/ui, this site is one of my first 'go-to' places to find answers.That said, contrary to the prohibition on page:DHTML ExamplesI found a way to make a drop down change color with every browser I've tried.I've included my code. <script>var sel; // variable for holding an HTML DOM select objectvar opt; // variable for holding an HTML DOM option objectfunction color_me(id){ if ((sel = document.getElementById(id)) && (opt = sel.options[sel.selectedIndex])) { // note this if should be commented out, unless you want to flip images with your // color changes /* ** commenting -- not important here ** if ((img = document.getElementById('img_' + id)) && (newimg = document.getElementById('flag_id_' + opt.value))) { img.src = newimg.src; } ** ** end image swap code. */ sel.style.backgroundColor = opt.style.backgroundColor; sel.style.color = opt.style.color; }}</script><select id="flag_sel" name="sel_color" onChange="color_me('flag_sel');"><option value="7" SELECTED style="background:orange;color:#000;">orange</option> <option value="1" style="background:white;color:#000;">white</option> <option value="4" style="background:cyan;color:#000;">cyan</option> <option value="5" style="background:gray;color:#000;">gray</option> <option value="6" style="background:green;color:#fff;">green</option> <option value="8" style="background:purple;color:#fff;">purple</option> <option value="10" style="background:yellow;color:#000;">yellow</option> <option value="12" style="background:lightslategray;color:#fff;">lightslategray</option> <option value="14" style="background:sienna;color:#fff;">sienna</option> <option value="15" style="background:teal;color:#fff;">teal</option></select><script>color_me('flag_sel');</script> I tested the exact code above in your handy-dandy 'try-it' interface, and it works great.I'd be interested if you could find a place (browser) where this doesn't work. It's pretty straight forward. The only tricky part I commented out (but left there for any guru's interest).Jefkin Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now