JSFIDDLE Link for Reference
<script>
.greenText{ color:green; }
</script>
<html>
<select onload="this.className='greenText'" onchange="this.className='greenText'">
<option value="apple" >Apple</option>
<option value="banana" >Banana</option>
<option value="grape" >Grape</option>
</select>
</html>
In the above example i add the CSS class for both onload and onchange event. But here only works on onchange but not working in onload event. I want to be in green color at the time of loading 'Dropdown Box'.
A select element doesn't load any external content, so there is no load event.
If you want to fire JS on it immediately after it has been added to the DOM, just put a <script>
element after its end tag.
It would seem to make more sense to simply use a class
attribute instead of involve JS though.
"Select" does not support the "onload" event. Try this
<style type="text/css">
.greenText{ color:green; }
</style>
<script type="text/javascript">
window.addEventListener("load",function(){
document.getElementById("my_select").className="greenText";
},false);
</script>
<select id="my_select" onchange="this.className='greenText'">
<option value="apple" >Apple</option>
<option value="banana" >Banana</option>
<option value="grape" >Grape</option>
</select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With