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

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>

我要实现的功能是，如果选择了颜色“ 红色 ”，请将car选择选项更新为“红色汽车1”和“红色汽车2” 。 如果选择了颜色“ 蓝色 ”，则将car选项更新为“蓝色汽车1”和“蓝色汽车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']);
});

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

Answer 1

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

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

Answer 2

在加载页面时拨打这样的电话-

updateOptions（carField，['red car 1'，'red car 2']）;