使用Ajax和Web Api的级联下拉菜单

Question

这是我的浏览器扩展对我的web api进行的ajax调用：

$(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，该API返回一个JSON数组，然后我从该数组中将每一项修改为一个标记，生成一个下拉列表。然后我有另一个下拉列表，它将依赖于用户选择的brand_name。如何对web API执行另一个ajax调用，该调用将根据品牌(特别是brand_id)填充另一个下拉列表，以便只显示所选品牌的产品。我已经创建了web api控制器，目前我正通过本地主机使用URL 'http://localhost:44358/api/products‘访问它。

Answer 1

您可以在品牌下拉菜单的change event上使用来获取其产品列表。

$(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>');
          });
    }
});