Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS][AJAX]Dynamiczne tworzenie select/option
Forum PHP.pl > Forum > XML, AJAX
rozny
Witam, mój problem jest następujący - tworzę dynamicznie pole select, z tym sobie poradziłem. Nie wiem jednak w jaki sposób utworzyć pola option dla tego selecta. Pola option tworzone są przez skrypt php wyciągający rekordy z bazy danych. Wiem, że skrypt JS powinien przez XMLHttpRequest wykonać zapytanie do pliku ze skryptem PHP, jednak nie wiem w jaki sposób wykorzystać wynik zapytania, gdyż tworzenie pól option w JS ma zupełnie inną składnię...

Na razie mam taki kod:

Tworzenie pola select

  1. function DodajSelect()
  2. {
  3. var select_field = document.createElement('select');
  4.  
  5.  
  6. var liczba = 0;
  7. var ilosc = document.forms['add_file'].elements.length;
  8. for (var i = 0; i < ilosc; i++ )
  9. {
  10. if (document.forms['add_file'].elements[i].type == 'select')
  11. {
  12. liczba += 1;
  13. }
  14. }
  15.  
  16. select_field.setAttribute('name', 'text-'+(liczba+1));
  17.  
  18. select_field.style.display = "block";
  19. select_field.style.margin= "2px 0";
  20.  
  21. document.forms['add_file'].appendChild(select_field);
  22.  
  23. }


Generowanie pól option

  1. $query = mysql_query('SELECT products.products_id, products.products_price, products_description.products_name FROM `products` INNER JOIN `products_description` ON products.products_id = products_description.products_id INNER JOIN `products_to_categories` ON products_to_categories.products_id = products.products_id WHERE products.products_status = 1 ORDER BY products_description.products_name ASC ');
  2.  
  3. while ($row = mysql_fetch_row($query)) {
  4.  
  5. echo '<option value="'.$row[0].'">'.$row[2].' - CENA:'.round($row[1], 2).' PLN</option>';
  6.  
  7. }


Jak do skryptu JS dodać zapytanie AJAX, które mi to scali w ładnego selecta?

Pozdrawiam
k_@_m_i_l
Użyj jquery. Ajaxem odbierz dane ze skryptu, a następnie dopisz do selecta otrzymaną treść.

  1. $("#dopisz").click(function()
  2. {
  3. $.ajax({
  4. type: "GET",
  5. url: "/test.php",
  6. data: "ajax=1",
  7. success: function(html)
  8. {
  9. $("select#select").append(html);
  10. }
  11.  
  12. });
  13. });
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.