页面首次加载，选项没有更新，如何解决？

Question

我有两个选择字段；

<label>Color:</label>    
<select id="color">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
</select>

<label>Car:</label>
<select id="car"></select>

我想实现一个功能，如果颜色“red”被选中，更新car选择选项为“red car 1”和“红车2”。如果选择颜色“Blue”，请将car 选项更新为“blue car 1”和“blue car 2”。

我通过以下方式实现此功能：

var updateOptions = function(carField, options) {
    carField.empty();
    for (var i = 0; i < options.length; i++) {
        carField.append("<option value=" + options[i] + ">" + options[i] + "</option>");
    }

};

var colorField = $('#color');
var carField = $('#car');

colorField.change(function() {
    if (colorField.val() === 'red') updateOptions(carField, ['red car 1', 'red car 2']);
    else if (colorField.val() === 'blue') updateOptions(carField, ['blue car 1', 'blue car 2']);
});

这里一切正常。唯一的问题是，car 选择选项只有在用户选择color 时才会更新。首次加载的页面不会更新car 选择选项。例如，“red”颜色是页面加载时默认选择的颜色，但页面加载后car字段为空。如何有效地摆脱这种情况？

Answer 1

尝试添加此代码：（在任何函数之外）

$(document).ready(function() {
  $('#color').change();
});

Answer 2

在加载页面时进行这样的调用 -

updateOptions(carField, ['red car 1','red car 2']);