jQuery: Versuchen, die Optionen anzuhängen, Tag

Question

Hi Ich versuche, die Optionen basierend auf der Eingabe an Tag auswählen. aber die Optionen hängen nicht an. Ich bekomme nicht einmal die Fehler, also wo ist der Fehler nicht in der Lage zu verstehen.

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); 
     }); 
    }); 
    }); 
}); 

Hier ist der Screenshot

Dies ist das Bild, wenn ich die Möglichkeit, aus einer Drop-Down ausgewählt & die Daten Nocken e aus Skript im JSON-Format

Dies ist die Screenshot firebug Debugging, die diese Daten zeigen angefügt zu werden, sondern auf klicken, um es nichts zeigt Meine Beispieldaten sind:

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

Answer 1

BEARBEITEN Basierend auf Chat

Da Sie diedynamisch bilden, müssen Sie das gewählte Plugin auslösen.

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

Fügen Sie es nach dem Anhängen der Optionen hinzu. Es wird funktionieren

DEMO

Sie versuchen, die Zeichenfolge direkt anzuhängen. Aber Sie müssen das DOM-Element anhängen.

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

Es muss

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

Noch besser ist, statt bei jeder Iteration zu der DOM-Struktur anhängen. Laden Sie es ein Array und stellen Sie dann die HTML() in select. Es wird die Leistung verbessern.

Answer 2

wäre eine weitere Alternative:

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