2013-09-28 22 views
6

Diciamo che ho questi dati restituiti da un livello di servizio di back-end:JQuery riempire DropDownList con i dati JSON

[ “2”, “3”, “7”, “14”]

Prima domanda. Sono considerati dati JSON validi? Json.org dice che lo è, ma non riesco a trovare alcun riferimento ad esso su Google, SO, ecc ...

Un elenco di valori ordinati. Nella maggior parte delle lingue, questo è realizzato come una matrice, vettore, lista o sequenza.

Desidero poter prendere questi valori e aggiungerli a un oggetto DropDownList già esistente OnLoad utilizzando 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. 
}); 

ho preso uno sguardo al this thread, ma ha gli oggetti, non solo un array. Dovrei usare parseJSON contro getJSON?

Grazie in anticipo!

+0

Credo che questo non è valido, valida JSON sarà qualcosa di simile { "chiave:‘2’, "chiave":‘’, "tasto 3":‘7’, "chiave": "14"} – Satya

+0

'$ .parseJSON ('[" 2 "," 3 "," 7 "," 14 "]')' restituirà una matrice.Meglio usare getJSON e iterare attraverso ogni elemento dell'array e aggiungerlo all'oggetto – rzr

risposta

9
var arr = [ 2, 3, 7, 14]; 
$.each(arr, function(index, value) { 
    ('#myselect').append($('<option>').text(value).attr('value', index)); 
}); 

Si prega inoltre di dare un'occhiata a una soluzione di Mr. C:

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

Il suo modo di manipolare option s è nuovo per me, e più elegante.

+0

Ha gettato "Object doesnot support .append" – Kurkula

+1

Qual è la tua versione di jQuery e qual è il tuo browser? – Blaise

+0

ie 11. bordo jquery. – Kurkula

2

Questo non è corretto JSON, deve essere questo stile:

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

si potrebbe usare quel campione per procceed voi risposta:

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

La mia soluzione è basata fuori di 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) 
     ); 
    }); 
}); 
1

Questa è la dichiarazione HiddenField, che è utile per memorizzare il JSON String

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

Questa è la dichiarazione DropDownList

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

Queste linee inizializzerà valore HiddenField con la lista ordinata (Si supponga che l'elenco contenga le coppie di valori chiave nell'ordine ordinato) che viene quindi serializzato utilizzando il serializzatore JSON

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

Queste righe utilizzeranno Elementi di JSON String una per una e popoleranno il menu a discesa con Valori.

$(document).ready(function() { 

    var myOptions = $.parseJSON($('#hdnBankStatus').val()); 
     var mySelect = $('#optStatus'); 
     $.each(myOptions, function (val, text) { 
      mySelect.append(
    $('<option></option>').val(text).html(val) 
     ); 
     }); 
    } 
-3

Per me, questo ha funzionato.

$("#ddlCaseType").append("<option>" + txt + "</option>"); 
+0

$ ("# ddlCaseType"). Append (""); –

0
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

Questo dovrebbe farlo –

Problemi correlati