ASP.NET MVC Mehrere Auswahllistenwerte nicht

Question

Ich habe 2 einzelne Dropdown-Menüs und 1 Multi-Select-List-Box. folgend ist der Code in html. Ich habe zuerst den Wert vom ersten Drop-down ausgewählt (single select). entsprechend seinem Wert wurden zweite Drop-Down-Werte geladen. Dann wählte ich einen Wert aus der 2. Dropdown-Liste. Ideales Szenario ist nach 2. Drop-Down-Wert 3. Multi-Select-List-Box sollte mit Wert geladen werden. Ich habe ein gefunden seltsames Verhalten. Auch wenn in HTML Auswahloptionen angezeigt werden, zeigt es beim Rendern keine Ergebnisse an.

<div class="row sub-container"> 
      <div class="sub-heading">Filter supplier/service provider by categories</div> 

      <div class="form-group clearfix"> 
       <label class="form-label col-md-3">Services Categories Level 1</label> 
       <div class="col-md-9"> 
        <section id="section-examples" class="attireBlock mod1"> 
         <div class=""> 
          <div class=""> 
           @Html.DropDownList("addServiceServiceCategoryLevel1", Model.ServiceCategoryList, "Please select a Category", new { @class = "form-control" }) 
          </div> 

         </div> 
        </section> 
       </div> 
      </div> 

      <div class="form-group clearfix"> 
       <label class="form-label col-md-3">Services Category Level2</label> 
       <div class="col-md-9"> 
        <section id="section-examples" class="attireBlock mod1"> 
         <div class=""> 
          @Html.DropDownList("addServiceServiceCategoryLevel2", new SelectList(string.Empty, "Id", "Name"), "Please select a Category", new { @class = "form-control" }) 
         </div> 
        </section> 
       </div> 
      </div> 

      <div class="form-group clearfix"> 
       <label class="form-label col-md-3">Services Category</label> 
       <div class="col-md-9"> 
        <section id="section-examples" class="attireBlock mod1"> 

         <div class="fstElement fstMultipleMode fstNoneSelected"> 


          @Html.ListBox("addServiceServiceCategory",new SelectList(string.Empty, "Id", "Name"), new { @class = "multipleSelect", @multiple = "" }) 
         </div> 
        </section> 
       </div> 
      </div> 

$(document).ready(function() { 

       $('.multipleSelect').fastselect(); 


    $("#addServiceServiceCategoryLevel2").on("change", function() { // whenever a selection is made 
     $("#addServiceServiceCategory").empty(); 

     var id = $("#addServiceServiceCategoryLevel2").val(); 

     $.ajax({ 
      type: 'POST', // we are calling json method 
      url: "/ServiceProviders/GetServiceCategoryLevel2", 
      dataType: 'json', 
      data: { id }, 
      success: function (states) { 

       $.each(states, function (i, state) { 
        $("#addServiceServiceCategory").append('<option value="' + state.Value + '">' + 
         state.Text + '</option>'); 
       }); 
      }, 
      error: function (ex) { 
       alert('Failed to retrieve states.' + ex); 
      } 
     }); 
     return false; 
    }); 

});

Answer 1

Ich denke, Ihr Problem ist, dass Sie Ihre Optionen aktualisieren nach Sie initialisieren als fastselect

daher hat es nicht die neue Änderung abholen

Versuch erneut initialisieren einmal Ajax Erfolg Daten laden

so etwas wie:

$.ajax({ 
    type: 'POST', // we are calling json method 
    url: "/ServiceProviders/GetServiceCategoryLevel2", 
    dataType: 'json', 
    data: { id }, 
    success: function (states) { 

     $.each(states, function (i, state) { 
      $("#addServiceServiceCategory").append('<option value="' + state.Value + '">' + 
       state.Text + '</option>'); 
     }); 

     // re initalize fastselect` 
     $('.multipleSelect').fastselect(); 
    }, 
    error: function (ex) { 
     alert('Failed to retrieve states.' + ex); 
    } 
});