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树.加载一个数组,然后在中设置html()select.它将改善性能.