Как обменять все опции в поле выбора с помощью jQuery

Question

У меня есть два поля выбора в форме - марка и модель. Моя цель - изменить параметры поля «модель» при выборе другой марки. Например. Выбрать BMW, показать все модели BMW.

Поэтому я выполняю ajax-вызов для получения этих значений, а затем хочу создать другую форму.

Код для построения опций:

obj = JSON.parse(json);
$.each(obj.item, function(key,valueObj){
    Object.keys(valueObj || {}).forEach(function(k) {
    $('#filter_model').append(
            $('<option></option>').val(k).html(valueObj[k])
    );
})

Это работает путем добавления новых опций. Но, конечно, когда я продолжаю изменять марку, она просто добавит новые модели в выбранные поля. Мне нужно будет либо удалить все существующие, либо как-то восстановить все поле. Последнее будет моим предпочтением, так как позже я хочу показывать поле модели только после выбора марки.

Как это могло быть достигнуто?

Answer 1

Добавление в цикл не является хорошей идеей, поскольку это дорогостоящая операция для запуска. Вместо этого вы можете построить строку HTML в вашем цикле, а затем установить ее в качестве содержимого для #filter_model, используя метод .html() (таким образом, изменяя DOM только один раз):

obj = JSON.parse(json);
var strHTML = "";
$.each(obj.item, function(key,valueObj) {
    Object.keys(valueObj || {}).forEach(function(k) {
      strHTML += '<option value="' + k +'">' + valueObj[k] +'</option>';
    });
});

$('#filter_model').html(strHTML);

Или, в качестве альтернативы, как предложено @ charlietfl , вы можете вместо этого построить массив ваших объектов jQuery и затем использовать .html() в этом массиве:

obj = JSON.parse(json);
var options = [];
$.each(obj.item, function(key,valueObj) {
    Object.keys(valueObj || {}).forEach(function(k) {
      options.push($('<option></option>').val(k).html(valueObj[k]));
    });
});

$('#filter_model').html(options);