Каскадный выпадающий список с использованием Ajax и веб-API

Question

Это ajax вызов, который мои расширения браузера делают для моего веб-интерфейса API:

$(document).ready(function () {
    $select = $('#brandDropdownList');
    $.ajax({
        type: "GET",
        url: 'http://localhost:44358/api/brands',
        dataType: 'JSON',
        success:function(data) {
            $select.html('');
            $.each(data, function(key, val) {
                $select.append('<option id="' + val.brand_id + '">' + val.brand_name + '</option>');
            })
        },
        error: function(){
            $select.html('<option id="-2">Please try again...</option>');
        }
    }); 

В настоящее время это вызывает мой API, который возвращает массив JSON, из которого я затем изменяю каждый элемент в тег делает выпадающий. Затем у меня есть еще один выпадающий список, который будет зависеть от названия бренда, которое выберет пользователь. Как я могу сделать еще один ajax вызов моего веб-API, который заполнит еще одно раскрывающееся меню в зависимости от бренда (в частности, brand_id), чтобы отображались только продукты этого выбранного бренда. Я создал контроллер веб-API, и в настоящее время я получаю к нему доступ через мой локальный хост с URL-адресом http://localhost: 44358 / api / products '.

Answer 1

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

$(document).ready(function () {
    $select = $('#brandDropdownList');
    $.ajax({
        type: "GET",
        url: 'http://localhost:44358/api/brands',
        dataType: 'JSON',
        success:function(data) {
            $select.html('<option value="">Select brand</option>');
            $.each(data, function(key, val) {
                $select.append('<option value="' + val.brand_id + '">' + val.brand_name + '</option>');
            })
        },
        error: function(){
            $select.html('<option value="-2">Please try again...</option>');
    });
    //When user select any Brand below change event will callled. 
    $('#brandDropdownList').change(function (){
         var brand_id = $(this).val();
         getProducts(brand_id);
    }):

    function getProducts(brand_id){
          $select = $('#productDropdownList')
          $select.html('<option value="">Please wait...</option>');
          $.ajax({
             type: "GET",
             url: 'http://localhost:44358/api/products',
             data:{brand_id : brand_id} //pass brand id to server to filter product of selected brand
             dataType: 'JSON',
             success:function(data) {
                 $select.html('');
                 $.each(data, function(key, val) {
                    $select.append('<option value="' + val.product_id + '">' + val.product_me + '</option>');
                 })
             },
             error: function(){
                 $select.html('<option value="-2">Please try again...</option>');
          });
    }
});