jQuery:Essayer d'ajouter les options pour sélectionner la balise

Salut, je suis en train d'ajouter les options basées sur entrée pour sélectionner la balise. mais les options ne sont pas ajout. Je ne suis même pas arriver les erreurs alors, où est le défaut n'est pas en mesure de comprendre.

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

Voici la capture d'écran
jQuery:Essayer d'ajouter les options pour sélectionner la balise

C'est l'image lorsque j'ai sélectionné l'option dans une liste déroulante & les données proviennent de script au format JSON

jQuery:Essayer d'ajouter les options pour sélectionner la balise

C'est le pyromane de débogage de capture d'écran qui montre que les données sont ajoutées, mais sur cliquez dessus montre rien
Mon échantillon de données est: est-ce

sample data: {
  "status":"OK",
  "response":200,
  "graphs":[[
    {"id":"B","text":"Bar Chart"},
    {"id":"D","text":"Doughnut Chart"},
    {"id":"P","text":"Pie Chart"}
  ]]
}
où est '#field_name' ? avez-vous l'extraction de données dans la console? console.log(value.text);
je n'ai pas ajouté le champ nom de la balise select, car les valeurs sont à venir pour la valeur.id & valeur.texte je peux voir cela sur la console de la opint est qu'il n'est pas en ajoutant de la destination

OriginalL'auteur Shaggie | 2015-04-18

  1. 7

    MODIFIER Basés sur Chat

    Puisque vous êtes dynamiquement formant la select, vous devez déclencher le plugin

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

    L'ajouter après avoir ajouté les options. Il travaillera

    DÉMO

    Vous essayez d'ajouter la chaîne directement. Mais vous devez ajouter l'élément du DOM.

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

    Il doit être

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

    Encore mieux, au lieu de l'ajout de l'arbre du DOM à chaque itération. Charger un tableau, puis définissez le format html() dans le select. Il permettra d'améliorer la performance.

    En fait le problème est qu'il est ajout mais pas de liste déroulante. Au lieu de cela lorsque je l'ai vu dans firebug, il me montre ajouté, mais l'ensemble de la div que j'ai vu, c'est dans désactivé format. qu'est-ce que je ne reçois pas
    Pouvez-vous créer un jsfiddle à regarder?
    je vais ajouter la capture d'écran ici. jsfiddle va prendre du temps, j'ai choisi de plugin que j'utilise pour moderniser la liste déroulante
    pour deux d'entre eux display: none propriété est définie dans le css. C'est très spécifique à choisi plugin. Veuillez installer un jsfiddle pour vérifier.
    j'ai essayé à mon niveau, vous pouvez corriger le lien:jsfiddle.net/sagar_barwade/jyn1jr05

    OriginalL'auteur mohamedrias

  2. 2

    Une autre alternative serait:

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

    OriginalL'auteur andybeli