2015-04-18 10 views
7

Witam Próbuję dołączyć opcje na podstawie danych wejściowych, aby wybrać znacznik. ale opcje nie są dołączane. Nie dostaję nawet błędów, więc gdzie błąd nie jest w stanie zrozumieć.jQuery: Próba dołączenia opcji wyboru znacznika

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

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

To jest obraz, gdy wybrano opcję z jednej listy rozwijanej & dane krzywka e ze skryptu w formacie JSON

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

To jest zrzut ekranu Firebug do debugowania, który pokazuje, że dane jest uzyskiwanie dołączane ale na kliknij to pokazano nic Moja próbka danych jest taka:

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

gdzie jest ' '# field_name''? czy otrzymujesz dane w konsoli? 'console.log (value.text);' –

+0

Nie dodałem tagu wyboru nazwy pola, ponieważ wartości idą do value.id i value.text Widzę to na konsoli. Operacja jest taka, że ​​nie jest ona dołączana do miejsca docelowego – Shaggie

Odpowiedz

7

EDYCJA Na podstawie rozmowy

Ponieważ dynamicznie formujesz select, musisz wyzwolić wybraną wtyczkę.

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

Dodaj po dodaniu opcji. Będzie ona działać

DEMO

Próbujesz dołączyć ciąg bezpośrednio. Ale musisz dołączyć element DOM.

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

To musi być

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

Jeszcze lepiej, zamiast dołączania do drzewa DOM na każdej iteracji. Załaduj tablicę, a następnie ustaw html() w select. Poprawi to wydajność.

+0

W rzeczywistości problem polega na tym, że jest on dołączany, ale nie wyświetla się na liście rozwijanej. Zamiast tego, gdy zobaczyłem go w firebugu, pokazuje mi się, ale cały div widziałem jest w formacie wyłączonym. co to jest, nie dostaję – Shaggie

+0

Czy możesz stworzyć jsfiddle do obejrzenia? – mohamedrias

+0

Dodam zrzut ekranu tutaj. jsfiddle zajmie trochę czasu Wybrałem wtyczkę, której używam do modernizacji listy rozwijanej – Shaggie

2

Inną alternatywą byłoby:

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