使用<select> </select>更改页面加载的样式

Question

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

如何在页面加载时以及<option> <select>已被选中时执行此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>

Answer 1

试试这个：

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());
});

Answer 2

创建一个函数：

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/

Answer 3

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

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

假设您的换色代码工作正常， 它只会触发更改事件，当您的文档准备就绪时，触发更改事件时，您的上述功能将用于处理事件。