在页面加载时为下拉菜单运行 javascript？答案

【问题标题】：Running javascript for dropdown on page load?在页面加载时为下拉菜单运行 javascript？
【发布时间】：2013-05-08 19:25:13
【问题描述】：

我有一个 js 函数，它可以在更改时控制选择元素的外观。但是，我需要的一件事是让代码从头开始运行，这样当元素加载时，应该已经应用了选定的选项类。

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

我希望 N 的类在加载时应用 color:rgba(0, 0, 0, 0);

【问题讨论】：

JavaScript that executes after page load的可能重复

标签： javascript html css select

【解决方案1】：

问题是您的更改函数需要一个对象，因此您需要在加载时获取该对象的句柄

你需要：

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

完整：

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

【讨论】：

【解决方案2】：

如果您使用的是 jquery：

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

如果你想坚持纯 js

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

【讨论】：

看起来像 Javascript，但我并不是要对此投反对票，因为它仍然是 jquery 的答案。可惜没有办法撤消反对票？
^现在你可以投票了。你应该把这个问题提交给 meta.stackoverflow.com，我也有同样的想法。
@Daniel 真的没有吗？你可以投赞成票，但这会给我比我应该拥有的多 8 个代表：S 我不值得投反对票 ;-)
看来您需要再次编辑答案@Muhammad 才能让我投票赞成大声笑，您添加了 JS 答案，这对我来说很好。做一个小改动，我会投赞成票，但绝对应该是撤消投反对票的一个选项。
您好 Muhammad，我不知道如何将您的解决方案实施到我的代码中以使其正常工作 - 您能帮忙吗？

【解决方案3】：

如果您希望 JS 在页面加载时运行，则可以使用“window.onload”命令。

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

【讨论】：

我试过用这个，没用。顺便说一句，我是 asp.net - 这与它有什么关系吗？
您是否在当前 colourFunction 代码之外使用了这个？也尝试将 colourFunction 代码直接添加到 window.onload = function(){}。
是的，我尝试了两种方法 - 似乎都没有，因为代码似乎中断了。
无法将选择传递给需要获取实际对象句柄的函数，请参阅我的答案以了解一种方法。