jQuery：尝试附加选项以选择标签答案

【问题标题】：jQuery:Trying to append the options to select tagjQuery：尝试附加选项以选择标签
【发布时间】：2015-06-25 04:26:29
【问题描述】：

您好，我正在尝试将基于输入的选项附加到选择标签。但选项没有附加。我什至没有收到错误，所以无法理解错误在哪里。

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"}
  ]]
}

【问题讨论】：

'#field_name' 在哪里？你有在控制台中获取数据吗？ console.log(value.text);
我没有添加字段名称选择标签，因为值即将到达 value.id 和 value.text 我可以在控制台上看到这一点，认为它没有附加到目的地

标签： javascript jquery jquery-chosen jquery-append

【解决方案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()。它将提高性能。

【讨论】：

实际上问题是它正在附加但未显示到下拉列表。相反，当我在萤火虫中看到它时，它显示我已附加但我看到的整个 div 都是禁用格式。我没有得到什么
你能创建一个jsfiddle来看看吗？
我将在此处添加屏幕截图。 jsfiddle 需要时间我已经选择了我用来现代化下拉菜单的插件
两者都显示：在css中没有设置属性。它非常特定于所选插件。请设置一个 jsfiddle 来检查。
我在我的水平上试过你可以更正它链接：jsfiddle.net/sagar_barwade/jyn1jr05

【解决方案2】：

另一种选择是：

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

【讨论】：