JavaScript/CSS : dynamically change border color of HTML element

Question

我有一个从我的 Laravel 安装中呈现的表格，它显示了我的 PHP 对象的几个属性，例如更新间隔:

<div class="col-xs-3 text-center">
    <select class="form-control" required id="update_interval" name="update_interval">
        <option value="">update_interval</option>
        <option value="never" selected="selected">never</option>
        <option value="daily">daily</option>
        <option value="weekly">weekly</option>
    </select>
</div>

在特定情况下，设置了“从不”值。在设置旁边，有一个保存按钮可供用户保存他们的设置:

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 text-center">
    <button type="submit" class="" id="buttonAck16">
        <i class="glyphicon glyphicon-floppy-save"></i>
    </button>
</form>

(我知道我可以为此使用 ajax，但我的 JS/PHP 技能相当有限....)。

但是，由于页面上可能有很多行，人们可能会忘记更改的内容。如果所选选项与原始值不同，我想为列条目着色，例如更改边框颜色。因此，如果它被设置为“从不”并且用户选择“每周”，则应该突出显示该特定元素。如果可能，保存按钮也可以突出显示。

什么样的 Javascript 函数可以连续检查事情是否发生变化？有人吗？

Answer 1

您可以使用 jQuery .change() 事件监听器:

例子:

$( "#update_interval" ).change(function() {
  $(".column-1").css("border-color", "#666");
});