Hinzufügen zusätzlicher Optionen zum Auswählen mit Ajax

Question

Ich versuche, zusätzliche Optionen zu einer Dropdown-Liste mit Ajax in JQM hinzuzufügen. Die erste Option ist eine statische deaktivierte ausgewählte und versteckte Option. Die anderen Optionen werden mit ajax aus einem Webservice extrahiert. Die Dropdown-Liste selbst befindet sich in einem Popup-Fenster.

Dies ist mein Code:

<div data-role="popup" id="puIceCream"><div> 
    <center>Select Flavor:</center> 
    <select id="ddlFlavorsIC"> 
     <option value="" disabled selected hidden>Please Choose...</option> 
     <!--Flavors are added here--> 
    </select> 
</div> 

Und der JS-Code ist unten:

$("#puIceCream").on("popupafteropen", function (event) { 
    if (!$("#ddlFlavorsIC option").length) { 
     WebServiceURL = "IceWS.asmx"; 
     $.support.cors = true; 
     $.ajax({ 
      url: WebServiceURL + "/GetFlavors", 
      dataType: "json", 
      type: "get", 
      data: "{ }", 
      contentType: "application/json; charset=utf-8", 
      error: function (err) { 
       alert("error: " + JSON.stringify(err)); 
      }, 
      success: function (data) { 
       var size = data["d"].length; 
       for (var i = 0 ; i < size; i++) { 
        $("#ddlFlavorsIC").append("<option>" + ((String)(data["d"][i].value)) + "</option>"); 
       } 
      } 
     }); 
    } 
}); 

Wenn ich entfernen die statische versteckte Option auf dem Markup es gut funktioniert, aber aus irgendeinem Grund es doesn arbeite nicht damit. Warum das?

Vielen Dank im Voraus!

Answer 1

ändern

if (!$("#ddlFlavorsIC option").length) { 

zu

if ($("#ddlFlavorsIC option").length < 2){ 

Ihr Code fügt nur Aromen, wenn es Null-Optionen in der Dropdown-Liste sind, so dass Ihr eine statische Option bewirkt, dass Sie nicht die IF-Anweisung eingeben.

DEMO