web-dev-qa-db-fra.com

JQuery remplit DropDownList avec des données JSON

Supposons que ces données proviennent d'une couche de service backend:

["2", "3", "7", "14"]

Première question. Est-ce que ceci est considéré comme une donnée JSON valide? Json.org dit que oui, mais je ne trouve aucune référence à cela sur Google, SO, etc ...

Une liste ordonnée de valeurs. Dans la plupart des langues, cela est réalisé sous forme de tableau, de vecteur, de liste ou de séquence.

Je veux pouvoir prendre ces valeurs et les ajouter à un objet DropDownList déjà existant OnLoad à l'aide de JQuery.

$.getJSON("http://www.example.com/path-to-get-data", function(data) { 
  //iterate through each object and add it to the list.
  //ideally, the key and value (string to display to the end user) would be the same.
});

J'ai jeté un coup d'oeil à ce fil , mais il a des objets, pas seulement un tableau. Devrais-je utiliser parseJSON versus getJSON?

Merci d'avance!

jqueryjsondrop-down-menu
8
Mr. C
var arr = [ 2, 3, 7, 14];
$.each(arr, function(index, value) {
     ('#myselect').append($('<option>').text(value).attr('value', index));
});

S'il vous plaît également jeter un oeil à la solution de M. C:

$('<option></option>').val(item).html(item)

Sa façon de manipuler options est nouvelle pour moi et plus élégante.

12
Blaise

Ma solution était basée sur Blaise's idea. 

//populate the Drop Down List
$.getJSON("http://www.example.com/api/service", function (data) {
     $.each(data, function (index, item) {
         $('#dropDownList').append(
              $('<option></option>').val(item).html(item)
          );
     });
 });
7
Mr. C

Ce n'est pas le bon JSON, ça doit être ce style: 

{"0": "2", "1" : "3", "2" : "7", "3" : "14"}

Vous pouvez utiliser cet exemple pour obtenir votre réponse:

var response = "[2, 3, 7, 14]";
eval("var tmp = " + response); 
console.log(tmp);
2
Rodion Shotskiy

C'est la déclaration de HiddenField, utile pour stocker la chaîne JSON

   <asp:HiddenField ID="hdnBankStatus" runat="server" />

Ceci est la déclaration de Dropdownlist 

   <select id="optStatus" name="optStatus" runat="server">
        </select>

Ces lignes initialiseront la valeur Hiddenfield avec la liste triée (en supposant que cette liste contient les paires clé/valeur dans l'ordre trié), qui est ensuite sérialisée à l'aide du sérialiseur JSON. 

   sl = new SortedList();
   hdnBankStatus.Value = jsonSerialiser.Serialize(sl);

Ces lignes utiliseront les éléments de la chaîne JSON un par un et rempliront le menu déroulant avec des valeurs.

   $(document).ready(function () {  

   var myOptions = $.parseJSON($('#hdnBankStatus').val());
        var mySelect = $('#optStatus');
        $.each(myOptions, function (val, text) {
            mySelect.append(
    $('<option></option>').val(text).html(val)
        );
        });
   }
1
Deepak Kothari
 var arr = [ 2, 3, 7, 14];
 var dropdown = ('#myselect');
 dropdown.empty();
 dropdown.append($('<option value=''>--Please Select--</option>'));
 $.each(arr, function(index, value) {
 dropdown.append($('<option value='+index+'>'+value+'</option>'));
 });`
0
Botlhale Jonathan Matlou