Running javascript for dropdown on page load?

Question

I have a js function which controls the appearance of a select element upon change. However, the one thing i need is for the code to run from start so that when the element loads the selected options class should have already been applied.

css:

  select {height: 50px; width: 80px; border: solid 1px #c8c8c8; color:rgba(0, 0, 0, 0);}
select:focus, #select:focus {
  color:black;
}

.lightgrey {background: lightgrey}
.green {background:green}
.orange {background:orange}
.yellow {background:yellow}
.red {background:red}
.purple {background:purple}

JavaScript:

function colourFunction(select) {
        var colour = select.options[select.selectedIndex].className;

        select.className = colour;
        select.blur();
    }

Select:

<select class="selectElement" runat="server" id="dropdown_" onchange="colourFunction(this)">
                    <option selected="selected" class="lightgrey" value="N">N</option>
                    <option class="green" value="G">G</option>
                    <option class="orange" value="O">O</option>
                    <option class="yellow" value="A">A</option>
                    <option class="red" value="R">R</option>
                    <option class="purple" value="U">U</option>
                </select>

I want the class for N to be applied on load with color:rgba(0, 0, 0, 0);

Possible duplicate of [JavaScript that executes after page load](https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — Heretic Monkey, Dec 26 '18 at 03:19

Muhammad Bekette · Accepted Answer · 2013-05-14T14:33:08.770

4

if you're using jquery:

$(function(){
 //all onload actions you want
});

if you want to stick with pure js

document.onreadystatechange=function(){
//all onload actions you want
}

edited May 14 '13 at 14:33

answered May 14 '13 at 13:29

Muhammad Bekette

1,396
1
24
60

Looks like Javascript, I didn't mean to downvote this though since it's still an answer for jquery. Shame there's no way to undo a downvote? – Midnightly Coder May 14 '13 at 13:30
^Now you can upvote. You should take that issue to meta.stackoverflow.com, I've had the same thought. – Bill May 14 '13 at 13:32
@Daniel really there isn't? you could upvote it but this will give me +8 rep more than I should have :S I don't deserve a downvote though ;-) – Muhammad Bekette May 14 '13 at 13:37
Seems you'll need to edit the answer one more time @Muhammad for me to be able to upvote lol, you added the JS answer so that's fine with me. Make a small change and I'll upvote it, definitely should be an option to undo a downvote though. – Midnightly Coder May 14 '13 at 13:41
Hi Muhammad, i don't know how to implement your solution into my code so that it works - can you please help? – Singh May 14 '13 at 13:51
@Jag sure, where do you put your js code, inside – Muhammad Bekette May 14 '13 at 13:55
@Muhammad Thanks - inside – Singh May 14 '13 at 13:56
great, if you use jquery just copy and paste the code above and put your own logic code instead of the commented line – Muhammad Bekette May 14 '13 at 14:00
i am getting confused by my own question. let me show you something: http://codepen.io/anon/pen/AfzxL please open that link it will show what the code does. basically whatever happens when i click the first option - i want that to happen automatically. – Singh May 14 '13 at 14:16
ok nice I can see it try put this before your method `document.onreadystatechange=function(){ alert("tata"); }` – Muhammad Bekette May 14 '13 at 14:22
now *if it worked* try to but whatever you want instead of the alert – Muhammad Bekette May 14 '13 at 14:22
it didn't work, is this how its meant to look: document.onreadystatechange=function(){ function colourFunction(select) { var colour = select.options[select.selectedIndex].className; select.className = colour; select.blur(); } } – Singh May 14 '13 at 14:25
basically the only thing i want is - you see when you select the "N" option, the select turns its bg to lightgrey with no text. Right not i see a a white background with black text. as soon as the page loads the select should have a lightgrey bg and no text - Internet Exporer compatible solution please – Singh May 14 '13 at 14:47
so you want to set the bg of the dropdown to specific color onload. write that code down then put it in the `document.onreadystatechange=function(){ //code here }` – Muhammad Bekette May 14 '13 at 14:50
thanks a lot for your help anyways - i give up on this issue. – Singh May 14 '13 at 15:00

score 4 · Answer 2 · answered May 14 '13 at 13:30

4

If you're wanting the JS to run on page load, then you can use the "window.onload" command.

window.onload = function()
{
    colourFunction(select);
};

answered May 14 '13 at 13:30

Midnightly Coder

1,053
1
11
23

i tried using this, it did not work. i am asp.net by the way - does that have anything to do with it? – Singh May 14 '13 at 13:45
Did you use this outside of your current colourFunction code? Try also adding the colourFunction code directly into the window.onload = function(){}. – Midnightly Coder May 14 '13 at 13:51
yes, i tried both ways - none seems to work as the code appears to break. – Singh May 14 '13 at 13:56
cant pass select to the function need to get a handle on the actual object see my answer for one way how to. – tgkprog May 31 '13 at 09:08

score 1 · Answer 3 · answered May 30 '13 at 14:59

Issue is that your function on change is expecting an object so you need to get a handle to that on load

You need:

window.onload = function()
{
   a = document.getElementById("dropdown_")
   a.selectedIndex = 1//or 0
    colourFunction(a);
};

Full:

<style>
select {height: 50px; width: 80px; border: solid 1px #c8c8c8; color:rgba(0, 0, 0, 0);}
select:focus, #select:focus {
  color:black;
}

.lightgrey {background: lightgrey}
.green {background:green}
.orange {background:orange}
.yellow {background:yellow}
.red {background:red}
.purple {background:purple}
</style>
<body>

<script>
function colourFunction(select) {
            var colour = select.options[select.selectedIndex].className;

            select.className = colour;
            select.blur();
        }

window.onload = function()
{
  a = document.getElementById("dropdown_")
  a.selectedIndex = 1//or 0
    colourFunction(a);
};

</script>   

<select runat="server"  id="dropdown_" onchange="colourFunction(this)">
<option  class="lightgrey" value="N">N</option>
<option class="green" value="G">G</option>
<option class="orange" value="O">O</option>
<option class="yellow" value="A">A</option>
<option class="red" value="R">R</option>
<option class="purple" value="U">U</option>
</select>

Running javascript for dropdown on page load?

3 Answers3