zubair439 Posted January 29, 2014 Share Posted January 29, 2014 When I am clicking reset, the background color in select field is not changing to white. Its displaying the color of the last selected option. Please help me out with this problem. I want to remove the background color too when I am clicking reset button. Thanks in advance for your help.. <body><form><input type="reset" class="resetButton" /><select id="select" style="color: white; width:60px;"onchange="changecolor(select,value)"><option value="white" style="background-color: white; "></option><option value="red" style="background-color: red; color: white;">AB</option><option value="blue" style="background-color: blue; color: white;">BC</option><option value="green" style="background-color: green; color: white;">CD</option><option value="orange" style="background-color: orange; color: white;">DE</option></select></form></body><script>$(function(){$('.resetButton').click(function(){$(this).closest('form').find('select').each(function(){$(this)[0].selectedIndex=0;});});});</script><script language="javascript" type="text/javascript">function changecolor(id,color){id.style.backgroundColor=color;}</script> Link to comment Share on other sites More sharing options...
Hadien Posted February 1, 2014 Share Posted February 1, 2014 (edited) using javascript to change the selectedIndex of select element does not cause it to fire the onchange event. you need to manually change the color. <body> <form> <input type="reset" class="resetButton" /> <select id="colors"> <option value="white"></option> <option value="red">AB</option> <option value="blue">BC</option> <option value="green">CD</option> <option value="orange">DE</option> </select> </form> <script> $('document').ready(function(){ $("#colors").change(function(){ $(this).css({"background-color":$(this).val()}); }); $('.resetButton').click(function(){ $("#colors").val("white").change(); }); }); </script></body>here I wrote it sticking closer to jquery own functions Edited February 1, 2014 by Hadien Link to comment Share on other sites More sharing options...
dsonesuk Posted February 2, 2014 Share Posted February 2, 2014 Style options css (does not require JavaScript to be enabled) #colors option {color: white;} option[value='red']{background-color: red;} option[value='blue']{background-color: blue;} option[value='green']{background-color: green;} option[value='orange']{background-color: orange;} or JQuery $("#colors option").each(function() { $(this).css({'background-color': $(this).val(), 'color': 'white'}); }); 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