2015-04-18 10 views
7

Ciao Sto cercando di aggiungere le opzioni in base all'input per selezionare il tag. ma le opzioni non vengono aggiunte. Non sto nemmeno ricevendo gli errori, quindi dov'è l'errore che non è in grado di capire.jQuery: Sto cercando di aggiungere le opzioni per selezionare il tag

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

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

Questa è l'immagine quando ho selezionato l'opzione da un menu a discesa & i dati Camera e da uno script in formato JSON

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

Questo è lo screenshot piromane di debug che mostra che i dati siano sempre accodato ma su clic su di esso sta mostrando nulla miei dati campione è questo:

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

dove è ' '# field_name''? hai i dati in console? 'console.log (value.text);' –

+0

Non ho aggiunto il nome del campo select tag come i valori stanno per arrivare a value.id & value.text posso vedere questo su console l'opint è che non si aggiunge alla destinazione – Shaggie

risposta

7

MODIFICA Basato su Chat

Poiché si sta formando dinamicamente il select, è necessario attivare il plug-in scelto.

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

Aggiungilo dopo aver aggiunto le opzioni. Si lavorerà

DEMO

Si sta cercando di aggiungere direttamente la stringa. Ma devi aggiungere l'elemento DOM.

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

Deve essere

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

Ancora meglio, invece di aggiungere alla struttura DOM su ogni iterazione. Caricarlo come array e quindi impostare html() nel select. Migliorerà le prestazioni.

+0

In realtà il problema è che si sta aggiungendo ma non mostrando al menu a discesa. Invece quando l'ho visto nel firebug, mi mostra che è stato aggiunto, ma l'intero div che ho visto è in formato disabilitato. cosa non sto ottenendo – Shaggie

+0

Puoi creare un jsfiddle da guardare? – mohamedrias

+0

aggiungerò qui lo screenshot. jsfiddle impiegherà tempo Ho scelto il plugin che sto usando per modernizzare il menu a cascata – Shaggie

2

Un'altra alternativa sarebbe:

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