Блог

Итак, у меня есть два выпадающих списка, в первом из которых мои продукты отображаются из json. Второй показывает модели, зависящие от выбора первого выпадающего списка. пример: в первом выпадающем списке отображается Apple, затем во втором будут показаны модели iphone и т.д.

У меня проблема с получением нужного содержимого во втором выпадающем списке. Может ли кто-нибудь сказать мне, почему второй выпадающий список заполняется «неопределенным»?

 $.each(jsonData.Mobiler, function (key, value) {

    $jsonProducent = key;

    $("#dropdown").append("<option id="   $jsonProducent   ">"   $jsonProducent   "</option>");

});

// MODElLER

$('#dropdown').change(function () {

    $selected = $(this).find(":selected")[0];

    if ($selected) {
        visModel($selected);
    }
});

function visModel($selected) {
    // testing if $selected.id is right
    alert($selected.id);

    $jsonModel = jsonData.Mobiler   $selected.id;

    // testing if $jsonModel is right
    alert($jsonModel);

    for (var i in $jsonModel) {

        console.log($jsonModel[i].Model);
        $("#dropdown2").append("<option>"   $jsonModel[i].Model   "</option>");
    }
};
});
  

Эта строка неверна

 $jsonModel = jsonData.Mobiler   $selected.id; 
  

Я не понимаю, почему вы суммируете два объекта. Вместо этого вы должны получить массив моделей по ключу

 $jsonModel = jsonData.Mobiler[$selected.id];   
  

Также вы должны удалять все предыдущие параметры из #dropdown2 после каждого изменения в #dropdown with

 $("#dropdown2 > option").remove(); 
  

Демонстрация JSFiddle