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

#javascript #jquery #jquery-selectors #jquery-events

#javascript #jquery #jquery-селекторы #jquery-события

Вопрос:

У меня есть два поля выбора;

 <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 параметры выбора. Например, «красный» цвет является цветом, выбранным по умолчанию при загрузке страницы, но поле car остается пустым после загрузки страницы. Как эффективно избавиться от этого?

Ответ №1:

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

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

1. @Mellon вы можете просто добавить еще один $(document).ready() смотрите тестовый пример 🙂

2. Да, это работает, и я обнаружил, что могу просто вызвать $ (‘#color’).change(), не имея «$ (document). ready()»снова, поскольку я уже внутри $ (document). готово().

Ответ №2:

При загрузке страницы выполните вызов, подобный этому —

updateOptions(carField, [‘красная машина 1’, ‘красная машина 2’]);