select nested in c # ajax mvc and bootstrap-select

It turns out that I'm loading a select with the data obtained from a database with ajax, this is the code c #

for this I use bootstrap-select

link

vision code

 <div id="buttonGrp" class="form-group">
            <div class="panel panel-default" id="searchConditionsPanel">
                <div class="panel-body mysearchpanel">
                    <div class="col-md-3">
                        <label class="control-label" for="Procedimiento">Procedimiento</label>
                        <div class="controls">
                            @*<input type="text" id="maxPrice" name="maxPrice" class="form-control input-normal" placeholder="Procedimiento">*@
                            <select id="IdProcedimiento" name="IdProcedimiento" class="form-control selectpicker" data-live-search="true">                                   
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="control-label" for="Licitante">Licitante</label>
                        <div class="controls">
                            @*<input type="text" id="keywords" name="keywords" class="form-control input-normal" placeholder="Razon Social">*@
                            <select id="IdProveedor" name="IdProveedor" class="form-control selectpicker" data-live-search="true"></select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <label class="control-label">&nbsp;</label>
                        <div class="controls">
                            <input type="submit" value="&nbsp;SEARCH &nbsp;" id="btnSubmit" class="btn btn-success">
                        </div>
                    </div>
                    <div class="col-md-5">                           
                    </div>
                </div>
            </div>

        </div>


  public JsonResult GetCatalogoProcedimientos()
    {

        var query = from mp in db.MtoProcedimientos
                    select new
                    {
                        MtoProcedimientoId = mp.MtoProcedimientoId,
                        NoLicitacion = mp.NoLicitacion
                    };

        return new JsonResult { Data = query.ToList(), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

here the ajax with which I charge the first select

function GetCatalogoProcedimientos(element) {     
if(element != null){
    //element.empty().append('<option selected="selected" value="0" disabled = "disabled">Loading.....</option>');
    $.ajax({
        type: "Get",
        url:  _urlBase + "Procedimientos/GetCatalogoProcedimientos",
        data: "{}",   
        dataType: "json",
        success: function (data) {
            //console.log(data);
            $.each(data, function (i, data) {
               element.append('<option value="'
                    + data.MtoProcedimientoId + '">'
                    + data.NoLicitacion + '</option>');
            });
        },
        error: function (msg) {
            $("#dvAlerta > span").text("Error al llenar el combo");
        }
    });
}}

Well now I want that when I select an element of the first select the second select is loaded for which I use the following action result.

 public JsonResult GetProveedoresConOferta(int id)
    {

        var Result = (from MO in db.MtoOfertas
                     join MP in db.MtoProveedores on MO.MtoProveedorId equals MP.MtoProveedorId
                      where MO.MtoProcedimientoId == id
                      select new {
                         //MO.MtoProcedimientoId,
                         MO.MtoProveedorId,
                         MP.RazonSocial
                     }).OrderBy(o => o.RazonSocial).Distinct();


        return new JsonResult { Data = Result, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

and the ajax is next.

function GetProveedoresConOferta(id) {
if (id!=0) {               
    $.ajax({
        type: "Get",
        url: _urlBase + "Ofertas/GetProveedoresConOferta",
        data: {id:id},
        dataType: "json",
        success: function (Data) {
            console.log(Data);
            $('#IdProveedor').css("disabled",true);
            $.each(Data, function (i, Data) {
                $('#IdProveedor').append('<option value="'
                     + Data.MtoProveedorId + '">'
                     + Data.RazonSocial + '</option>');
            });
        },
        error: function (msg) {
            $("#dvAlerta > span").text("Error al llenar el combo");
        }
    });
}    }

This is triggered when in the select I select a record with the following code.

 $('#IdProcedimiento').on('hidden.bs.select', function (e) {      
    var item = $('#IdProcedimiento').val();
    if (item != 0)
    {            
        GetProveedoresConOferta(item);
    }
});

The problem is that although the result of ajax returns me records it is not possible to load them in the second select.

could throw me support to find the solution, thank you very much

the return value is an array of type.

The funny thing is that if the select with id "IdProveedor" I remove the class selectpicker , if you upload the information.

thanks

[…]

0: Object {MtoProviderId: 100, RazonSocial: "DIAGNODISTRIBUTIONS, S.A. DE C.V." } 1: Object {MtoProveedorId: 103, RazónSocial: "DIAGNOQUIM, S. A. DE C.V." } 2: Object {MtoProveedorId: 181, RazonSocial: "GENESIS HEALTHCARE ADVISERS, S. A. DE C. V." } 3: Object {MtoProveedorId: 245, RazónSocial: "KABLA COMERCIAL, S.A. DE C.V." } 4: Object {MtoProveedorId: 304, RazónSocial: "MEXGLOBAL, S.A. DE C.V." } 5: Object {MtoProveedorId: 323, RazónSocial: "PASTEUR HEALTH CARE S.A. DE C.V." } 6: Object {MtoProveedorId: 329, RazónSocial: "PHARMACUR, S.A. DE C.V"} 7: Object {MtoProveedorId: 435, RazónSocial: "AXMILAB, S.A. DE C.V." } 8: Object {MtoProveedorId: 437, RazónSocial: "BIOXINTEGRAL SERVICIOS, S.A. DE C.V." } 9: Object {MtoProveedorId: 439, RazónSocial: "CINVESTILAB, S.A. DE C.V." } 10: Object {MtoProveedorId: 441, RazónSocial: "CONSUMIBLES DC, S.A. DE C.V." } 11: Object {MtoProveedorId: 443, RazónSocial: "DISTRIBUIDORA DE EQUIPO MÉDICO, S.A. DE C.V." } 12: Object {MtoProveedorId: 444, RazónSocial: "MULTIEQUIPOS Y MEDICAMENTOS, S.A. DE C.V." } length: 13 proto : Array []