jQuery:Trying to append the options to select tag

Question

Hi I am trying to append the options based on input to select tag. but options are not appending. I am not even getting the errors so where is the fault not able to understand.

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

Here is the screenshot

This is the image when i selected the option from one dropdown & the data came from script in JSON format

This is the firebug debugging screenshot that shows that data is getting appended but on click it is showing nothing My sample data is this:

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

Horsewoman

where is '#field_name' ? have you getting data in console? console.log(value.text); – Foretopgallant

i have not added the field name select tag as values are coming to value.id & value.text i can see this on console the opint is it is not appending to the destination – Horsewoman

Answer 1

EDIT Based on Chat

Since you're dynamically forming the select, you must trigger the chosen plugin.

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

Add it after appending the options. It will work

DEMO

You're trying to append the string directly. But you must append the DOM element.

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

It must be

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

Even better, instead of appending to the DOM tree on every iteration. Load it an array and then set the html() in the select. It will improve the performance.

Colas

Actually the problem is it is appending but not showing to dropdown. Instead when i saw it in the firebug, it is showing me appended but the whole div i have seen is in disabled format. what is it i am not getting – Horsewoman

Can you create a jsfiddle to look at? – Colas

i will add the screenshot here. jsfiddle will take time i have chosen plugin that i am using to modernize the dropdown – Horsewoman

for both of them display: none property is set in css. It's very specific to chosen plugin. Please setup a jsfiddle to check. – Colas

i tried at my level you can correct it link:jsfiddle.net/sagar_barwade/jyn1jr05 – Horsewoman

Great! Looking at it. Please share some sample data for data.graphs – Colas

what the fish......when i remove the chosen class for second dropdown then it is showing me the output in the dropdown the problem is with chosen class for second dropdown.... – Horsewoman

Let us continue this discussion in chat. – Colas

Answer 2

Another alternative would be:

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

Unorthodox