Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Listy wyboru w JS
Forum PHP.pl > Forum > Przedszkole
elldiablo
Witam,

Czy wiecie jak zrobić w js listę wyboru tak jak to jest zrobione na allegro podczas wystawiania przedmiotu na aukcji.

Potrzebuje co najmniej trzech podkategorii. Np. Audi ->80, 90, 100 ->(100) C1, C2

Czyli wybieram audi i są trzy opcje, następnie wybieram 100 i mam kolejne opcje (C1 i C2)

Następnie muszę przesłać to w formularzu na kolejną stronę gdzie będzie wyświetlona nazwa pojazdu marka i model czyli Audi 100 C1

Na js kompletnie się nie znam, a wiem że do robienia fajnych serwisów www jest wymagany.

Proszę o jakiś przykład z trzema polami wyboru.
skowron-line
Było dużo razy poszukaj na forum/google
http://forum.php.pl/index.php?showtopic=14...mp;#entry704061
patryk9200
do zrobienia banalnie proste, mam coś takiego u siebie z tym, że to czysty javascript bez frameworków.
Wygląda to tak:
Dodajesz to do nagłówka:
  1. <script type="text/javascript">
  2. var xmlhttp;
  3. function showList(str,str2)
  4. {xmlhttp=GetXmlHttpObject();
  5. var url="'.URL.'show_models.php";<!-- plik z którego pobiera zawartość-->
  6. url=url+"?N-4_marka="+str+"&selectID="+str2;<!--zapytanie przesyłane do pliku z którego pobieramy zawartość-->
  7. xmlhttp.onreadystatechange=stateListChanged;
  8. xmlhttp.open("GET",url,true);
  9. xmlhttp.send(null);}
  10. function stateListChanged()
  11. {if (xmlhttp.readyState==4)
  12. {document.getElementById("select").innerHTML=xmlhttp.responseText;
  13. document.getElementById("hidden_select").style.display = "none";
  14. document.getElementById("select").style.display = "";}}
  15. function GetXmlHttpObject()
  16. {if (window.XMLHttpRequest)
  17. {return new XMLHttpRequest();}
  18. if (window.ActiveXObject)
  19. {return new ActiveXObject("Microsoft.XMLHTTP");}
  20. return null;}

nie wiem jak Ty przechowujesz modele i marki ale ja mam to w pliku XML
a plik show_models.php wygląda tak:

  1. <?php
  2. if ($_GET['selectID'])
  3. {$w = TRUE;} else {$w=FALSE;}
  4. if($_GET['N-4_marka'])
  5. {
  6. $xml = simplexml_load_file(GLOWNY.'data.xml');
  7. echo '<select name="N-6_model" style="width:152px"onchange="(this.value)">';
  8. $result = $xml->xpath('/*/osobowe/marka[@id='.$_GET['N-4_marka'].']');
  9. foreach($result[0] as $key => $value)
  10. { if ($w = TRUE)
  11. {if ($_GET['selectID'] == $value['id'])
  12. {$h= 'selected';} else {$h=NULL;}}
  13. echo '<option value="'.$value['id'].'" '.$h.'>'.$value['name'].'</option>';}
  14. echo '</select>';
  15. }
  16.  
  17. ?>


A to dodajesz tam gdzie chcesz mieć dynamiczne pole select
dodatkowo ma taką ciekawą opcję, że jeśli przypiszesz dla
$_SESSION['offer'][$_offerID]['add']['mark'] numer marki to ją automatycznie ci zaznaczy identycznie masz z modelem
$_SESSION['offer'][$_offerID]['add']['model'] działa idealnie

  1. //@@MARKA
  2. echo '<td><select name="N-6_marka" onchange="showList(this.value)" style="width:152px" >';
  3. $result = $_mark ->xpath('/*/osobowe/*');
  4. foreach($result as $key => $value)
  5. {if ($_SESSION['offer'][$_offerID]['add']['mark'] == $value['id'])
  6. {$h=$select;
  7. echo '<script type="text/javascript">
  8. showList('.$value['id'].', '.$_SESSION['offer'][$_offerID]['add']['model'].');</script>';
  9. } else {$h=null;}
  10. echo '<option value="'.$value['id'].'" '.$h.'>'.$value['name'].'</option>';}
  11. echo '</select></td>';
  12. //@@MODEL
  13. echo '<td><select id="hidden_select" name="N-6_model" style="width:152px" onchange="(this.value)">
  14. <option value="0">'.$_Lang->search->all.'</option></select><div id="select" style="display: none"></div>
  15. </select><div id="select" style="display: none; margin: 0px; width:100%; padding: 0px; border: 0px;"></div></td>';

w razie pytań pisz smile.gif
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.