5

我有一个 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);

4

3 回答 3

4

如果您使用的是 jquery：

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

如果你想坚持纯 js

document.onreadystatechange=function(){
//all onload actions you want
}
于 2013-05-14T13:29:27.710 回答
4

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

window.onload = function()
{
    colourFunction(select);
};
于 2013-05-14T13:30:01.337 回答
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>
于 2013-05-30T14:59:16.360 回答