【问题标题】：Change style on page load with a <select>使用 <select> 在页面加载时更改样式
【发布时间】：2014-04-12 12:36:35
【问题描述】：

我有这段 js 代码允许我在 <select> 更改时更改表格主题颜色。

当页面加载并且已经选择了<select> 的<option> 时，如何执行这个jQuery？

谢谢。

我的 HTML：

<select name="HOT_ColorsTheme" id="HOT_ColorsTheme" class="form-control">
    <option value="A">Thème A</option>
    <option value="B" selected>Thème B</option>
</select>

我的 JS：

<script>
$("#HOT_ColorsTheme").on('change', function() {
    var sel = $('#HOT_ColorsTheme').val();
     if (sel=='A') {
             $(".Today").css({'background' : '#fe0002', 'color' : '#000000'});
    }
     if (sel=='B') {
             $(".Today").css({'background' : '#dedede', 'color' : '#000000'});
    }
});     
</script>

【问题讨论】：

标签： jquery

【解决方案1】：

创建一个函数：

function changeColor() {
    var sel = $('#HOT_ColorsTheme').val();
    if (sel=='A') {
         $(".Today").css({'background' : '#fe0002', 'color' : '#000000'});
    }
    if (sel=='B') {
         $(".Today").css({'background' : '#dedede', 'color' : '#000000'});
    }
}

然后：

<script>
    $("#HOT_ColorsTheme").on('change', changeColor);
    $(document).ready(function() {
        changeColor();
    });
</script>

小提琴：http://jsfiddle.net/gfg/yjNP4/1/

【讨论】：

这与我的回答有何不同？
我没有看到之前的答案，但是 onchange 中的大括号不起作用

【解决方案2】：

试试这个：

function changeScheme(){
   var sel = $('#HOT_ColorsTheme').val();
   if (sel=='A') {
      $(".Today").css({'background' : '#fe0002', 'color' : '#000000'});
   }
   if (sel=='B') {
      $(".Today").css({'background' : '#dedede', 'color' : '#000000'});
   }
}

$(document).ready(function(){
   changeScheme();
   $("#HOT_ColorsTheme").on('change', changeScheme());
});

【讨论】：

OP 说“页面加载时”，所以 Document.ready 不在页面加载时 [document.ready vs window.load] (stackoverflow.com/questions/8562609/…)
@Freak_Droid：我相信以 OP 目前对 JS 和英语的了解，很难说出他想要什么。我相信这个答案是正确的。（除了他的第二条评论，我现在要编辑我的答案）。
@Richard Rodriguez：我是法国人。

【解决方案3】：

您可以在$(function(){ ---- }); 的末尾多写一行（即文档就绪代码）

$(function(){
--
----- your other js code if any
--
    // triggering the change event on the select by referring its id
    $('#HOT_ColorsTheme').trigger('change');
});

假设您的变色代码工作正常，它只会触发 change 事件，当您的文档准备好时，当触发 change 事件时，您上面的函数就可以处理该事件。

【讨论】：