在页面加载时运行javascript进行下拉？_Javascript_Html_Css_Select

在页面加载时运行javascript进行下拉？

javascript html css select

在页面加载时运行javascript进行下拉？,javascript,html,css,select,Javascript,Html,Css,Select,我有一个js函数，它控制select元素在更改时的外观。然而，我需要的一件事是代码从一开始就运行，这样当元素加载时，所选的选项类应该已经应用 css: JavaScript: function colourFunction(select) { var colour = select.options[select.selectedIndex].className; select.className = colour; select.blur();

我有一个js函数，它控制select元素在更改时的外观。然而，我需要的一件事是代码从一开始就运行，这样当元素加载时，所选的选项类应该已经应用

css:

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的类在加载时应用颜色：rgba0，0，0，0

如果使用jquery：

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

如果你想坚持使用纯js

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

如果希望JS在页面加载时运行，那么可以使用window.onload命令

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

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

你需要：

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

全部：

看起来像Javascript，但我并不想否决它，因为它仍然是jquery的答案。不好意思，没有办法撤消否决票？^现在你可以向上投票了。你应该把这个问题带到meta.stackoverflow.com，我也有同样的想法。@Daniel真的没有吗？你可以投赞成票，但这会给我比我应有的多+8个代表：S我不值得投反对票-看来你需要再编辑一次答案@Muhammad，这样我才能投票，哈哈，你添加了JS答案，这样我就可以了。做一个小的改变，我会向上投票，当然应该是撤销向下投票的一个选项。嗨，穆罕默德，我不知道如何在我的代码中实现你的解决方案，这样它就可以工作了-你能帮忙吗？我试过用这个，但没有工作。顺便问一下，我是asp.net-这与此有关吗？您是否在当前函数代码之外使用了此功能？还可以尝试直接将colorFunction代码添加到窗口中。onload=函数{}。是的，我尝试了两种方法-没有一种方法可以工作，因为代码似乎要中断。无法将select传递给函数需要获得实际对象的句柄查看我的答案了解一种方法如何。可能重复

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>