html - Running javascript for dropdown on page load?

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);

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);

Share Improve this question edited Dec 26, 2018 at 3:16 Cœur 38.7k26 gold badges203 silver badges277 bronze badges asked May 14, 2013 at 13:25 Singh 5552 gold badges6 silver badges24 bronze badges

Possible duplicate of JavaScript that executes after page load – Heretic Monkey Commented Dec 26, 2018 at 3:19

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

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
}

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

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

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Running javascript for dropdown on page load? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)