2

This is an ajax call my browser extenions makes to my web 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>');
        }
    });

This currently calls my API which returns the an JSON array from which I then amend each item to an tag making a drop down. I then have another drop down which will be dependant on the brand_name the user chooses. How can I do another ajax call to my web API that will populate another drop down based on the brand (specifically the brand_id) so that only products of that chosen brand are shown. I have created the web api controller and it I am currently accessing it via my localhost with the URL 'http://localhost:44358/api/products'.

Improve this question

1 Answer 1

Reset to default
2

You can use on change event on Brand drop-down to get it's product list.

$(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>');
          });
    }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the help. I knew I had to use the on change event but wasn't sure how to pass in the brand of as part of the next Ajax call. Greatly appreciated

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.