Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Onload event not working in select box (Dropdown List Box)

Tags:

html

css

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'.

like image 765
Vijayakumar B Avatar asked Jun 17 '15 11:06

Vijayakumar B


2 Answers

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.

like image 90
Quentin Avatar answered Sep 17 '22 15:09

Quentin


"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>
like image 26
Federico Avatar answered Sep 19 '22 15:09

Federico