Страница первой загрузки, параметры не обновляются, как решить?

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']);
});

Здесь все хорошо. Единственная проблема заключается в том, что параметры выбора car обновляются, только если пользователь выбирает color. При первой загрузке страницы не будет обновлять параметры выбора car. Например, « красный » - это выбранный по умолчанию цвет при загрузке страницы, но поле автомобиля пусто после загрузки страницы. Как эффективно от этого избавиться?

Answer 1

Попробуйте добавить этот код: (вне любой функции)

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

Answer 2

Во время загрузки страницы звоните так:

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