jQuery: Sto cercando di aggiungere le opzioni per selezionare il tag

Question

Ciao Sto cercando di aggiungere le opzioni in base all'input per selezionare il tag. ma le opzioni non vengono aggiunte. Non sto nemmeno ricevendo gli errori, quindi dov'è l'errore che non è in grado di capire.

HTML

<div class="col-lg-5"> 
     <div class="input-group"> 
      <label>Select type of Graph</label>  
      <select data-placeholder="Select Field..." id="graph_name" style="width:300px;" name="team_name" class="chosen-select" tabindex="2"> 

      </select> 
     </div> 
    </div> 

jQuery:

$('#field_name').change(function() { 
    var fieldname = $('#field_name option:selected').val(); 
    $.post('<?php echo BASE_URL . 'php/processing/formDashboard/graph/showPossibleGraphs.php?id=' . $_GET['id']; ?>', {fieldname: fieldname}, function(data) { 
    $.each(data.graphs, function(index, value) { 
     $.each(value, function(index, value) { 
     console.log(value.id); 
     console.log(value.text); 
     var option = '<option value="'+value.id+'">'+value.text+'</option>'; 
     $('#graph_name').append(option); 
     }); 
    }); 
    }); 
}); 

Ecco lo screenshot

Questa è l'immagine quando ho selezionato l'opzione da un menu a discesa & i dati Camera e da uno script in formato JSON

Questo è lo screenshot piromane di debug che mostra che i dati siano sempre accodato ma su clic su di esso sta mostrando nulla miei dati campione è questo:

sample data: { 
    "status":"OK", 
    "response":200, 
    "graphs":[[ 
    {"id":"B","text":"Bar Chart"}, 
    {"id":"D","text":"Doughnut Chart"}, 
    {"id":"P","text":"Pie Chart"} 
    ]] 
} 

Answer 1

MODIFICA Basato su Chat

Poiché si sta formando dinamicamente il select, è necessario attivare il plug-in scelto.

$('#graph_name').trigger("chosen:updated"); 

Aggiungilo dopo aver aggiunto le opzioni. Si lavorerà

DEMO

Si sta cercando di aggiungere direttamente la stringa. Ma devi aggiungere l'elemento DOM.

var option = '<option value="'+value.id+'">'+value.text+'</option>'; 
    $('#graph_name').append(option); 

Deve essere

var option = $('<option value="'+value.id+'">'+value.text+'</option>'); 
    $('#graph_name').append(option); 

Ancora meglio, invece di aggiungere alla struttura DOM su ogni iterazione. Caricarlo come array e quindi impostare html() nel select. Migliorerà le prestazioni.

Answer 2

Un'altra alternativa sarebbe:

$.each(selectValues, function(key, value) { 
    $('#graph_name') 
     .append($("<option></option>") 
     .attr("value",key) 
     .text(value)); 
});