在页面加载时为下拉菜单运行 javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16544452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Running javascript for dropdown on page load?
提问by Singh
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.
我有一个 js 函数，它在更改时控制选择元素的外观。但是，我需要的一件事是代码从头开始运行，以便在元素加载时选择的选项类应该已经被应用。
css:
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:
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);
我希望 N 的类在加载时应用 color:rgba(0, 0, 0, 0);
采纳答案by Muhammad Ramahy
if you're using jquery:
如果您使用的是 jquery：
$(function(){
//all onload actions you want
});
if you want to stick with pure js
如果你想坚持使用纯 js
document.onreadystatechange=function(){
//all onload actions you want
}
回答by Midnightly Coder
If you're wanting the JS to run on page load, then you can use the "window.onload" command.
如果您希望 JS 在页面加载时运行，那么您可以使用“window.onload”命令。
window.onload = function()
{
colourFunction(select);
};
回答by tgkprog
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>
