jQuery: пытается добавить параметры для выбора тега

Question

Привет Я пытаюсь добавить параметры на основе ввода для выбора тега. но параметры не добавляются. Я даже не ошибаюсь, и где ошибка не в состоянии понять.

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

Вот скриншот

Это изображение, когда я выбрал вариант из одного выпадающего списка & данных кулачок е из сценария в формате JSON

Это скриншот отладки поджигателя, который показывает, что данные получения добавляется, но на кнопку он не показывает ничего Мои данные выборки заключается в следующем:

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

Answer 1

EDIT на основе чата

Поскольку вы динамически формируете select, вы должны запустить выбранный плагин.

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

Добавьте его после добавления опций. Она будет работать

DEMO

Вы пытаетесь добавить строку непосредственно. Но вы должны добавить элемент DOM.

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

Должно быть

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

Еще лучше, если вместо того, чтобы добавить его к дереву DOM на каждой итерации. Загрузите массив и затем установите html() в select. Это улучшит производительность.

Answer 2

Другой альтернативой было бы:

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