jquery-Dropdown mit json-Daten füllen

Ich habe den folgenden jQuery-Code. Ich kann die folgenden Daten vom Server abrufen [{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}]. Wie iteriere ich darüber und fülle ein Auswahlfeld mit id=combobox

$.ajax({
    type: 'POST',
    url: "<s:url value="/ajaxMethod.action"/>",
    data:$("#locid").serialize(),
    success: function(data) {
        alert(data.msg);

                //NEED TO ITERATE data.msg AND FILL A DROP DOWN
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    },
    dataType: "json"
});

Und was ist der Unterschied zwischen Verwendung .ajax und $.getJSON.

Das sollte den Trick machen:

$($.parseJSON(data.msg)).map(function () {
    return $('<option>').val(this.value).text(this.label);
}).appendTo('#combobox');

Hier ist die Unterscheidung zwischen ajax und getJSON (von dem jQuery-Dokumentation):

[getJSON] ist eine abgekürzte Ajax-Funktion, die äquivalent ist zu:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

BEARBEITEN: Um es klar zu sagen, ein Teil des Problems bestand darin, dass die Antwort des Servers ein json-Objekt zurückgab, das so aussah:

{
    "msg": '[{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}]'
}

…So dass msg Eigenschaft musste manuell mit analysiert werden $.parseJSON().

Wenn Ihre Daten bereits in Array-Form vorliegen, ist es mit jQuery ganz einfach:

 $(data.msg).each(function()
 {
     alert(this.value);
     alert(this.label);

     //this refers to the current item being iterated over

     var option = $('<option />');
     option.attr('value', this.value).text(this.label);

     $('#myDropDown').append(option);
 });

.ajax() ist flexibler als .getJSON() – Zum einen ist getJson speziell als GET-Anforderung zum Abrufen von JSON gedacht; ajax() kann bei jedem Verb anfordern, einen beliebigen Inhaltstyp zurückzugeben (obwohl das manchmal nicht nützlich ist). getJSON ruft intern .ajax() auf.

Hier ist ein Codebeispiel, das versucht, AJAX-Daten abzurufen /Ajax/_AjaxGetItemListHelp/ URL. Bei Erfolg werden alle Elemente aus der Dropdown-Liste mit entfernt id = OfferTransModel_ItemID und dann füllt es es mit neuen Elementen basierend auf dem Ergebnis des AJAX-Aufrufs:

if (productgrpid != 0) {    
    $.ajax({
        type: "POST",
        url: "/Ajax/_AjaxGetItemListHelp/",
        data:{text:"sam",OfferTransModel_ItemGrpid:productgrpid},
        contentType: "application/json",              
        dataType: "json",
        success: function (data) {
            $("#OfferTransModel_ItemID").empty();

            $.each(data, function () {
                $("#OfferTransModel_ItemID").append($("<option>                                                      
                </option>").val(this['ITEMID']).html(this['ITEMDESC']));
            });
        }
    });
}

Es wird erwartet, dass das zurückgegebene AJAX-Ergebnis als AJAX-Array codierte Daten zurückgibt, in denen jedes Element enthalten ist ITEMID und ITEMDESC Elemente. Beispielsweise:

{
    {
        "ITEMID":"13",
        "ITEMDESC":"About"
    },
    {
        "ITEMID":"21",
        "ITEMDESC":"Contact"
    }
}

Der OfferTransModel_ItemID Die Listbox ist mit den obigen Daten gefüllt und ihr Code sollte wie folgt aussehen:

<select id="OfferTransModel_ItemID" name="OfferTransModel[ItemID]">
    <option value="13">About</option>
    <option value="21">Contact</option>
</select>

Wenn der Benutzer auswählt AboutFormular absendet 13 als Wert für dieses Feld und 21 wenn der Benutzer auswählt Contact und so weiter.

Es steht Ihnen frei, den obigen Code zu ändern, wenn Ihr Server die URL in einem anderen Format zurückgibt.

In den meisten Unternehmen wurde eine gemeinsame Funktionalität für mehrere Dropdownlisten für alle Seiten benötigt. Rufen Sie einfach die Funktionen auf oder übergeben Sie Ihre (DropDownID, JsonData, KeyValue, TextValue)

    <script>

        $(document).ready(function(){

            GetData('DLState',data,'stateid','statename');
        });

        var data = [{"stateid" : "1","statename" : "Mumbai"},
                    {"stateid" : "2","statename" : "Panjab"},
                    {"stateid" : "3","statename" : "Pune"},
                     {"stateid" : "4","statename" : "Nagpur"},
                     {"stateid" : "5","statename" : "kanpur"}];

        var Did=document.getElementById("DLState");

        function GetData(Did,data,valkey,textkey){
          var str= "";
          for (var i = 0; i <data.length ; i++){

            console.log(data);


            str+= "<option value="" + data[i][valkey] + "">" + data[i][textkey] + "</option>";

          }
          $("#"+Did).append(str);
        };    </script>

</head>
<body>
  <select id="DLState">
  </select>
</body>
</html>