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格式的腳本

這是firebug調試截圖，顯示數據被追加，但點擊它沒有顯示任何內容我的樣本數據是這樣的：

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

Answer 1

編輯基於聊天

由於您正在動態形成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樹。 加載一個數組，然后在select設置html（）。 它將改善性能。

Answer 2

另一種選擇是：

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