Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zależne od siebie rozwijane listy
Forum PHP.pl > Forum > XML, AJAX > AJAX
deus7
17.06.2012, 21:55:19
Witam.
Mam problem bo nie znam się za bardzo na js a muszę zrobić wyszukiwarkę z kikoma opcjami wyboru zależnymi od siebie.

Chodzi o to że mamy 3 listy rozwijane:
1 – kolor (zielony, czerwony, czarny … )
2 – materiał (wełna, bawełna, len …)
3 – gramatura ( …....... )

Po wybraniu opcji z dwóch pierwszych list skrypt powinien przekazywać te wybrane opcje np.: 1 – zielony; 2 – bawełna do pliku php (POST) który pobierze z bazy danych dane odpowiednie dla tych opcji w postaci tablicy (w tablicy już sobie sformatuję że będą to <option value=”one”>one</option>) i skrypt js pobierze tą tablice i wyświetli ją w 3 liście rozwijanej (jeżeli nie zostały jeszcze wybrane dwie pierwsze opcje lista jest nie aktywna ---)

Jeżeli by ktoś miał chwilkę wymyślić coś takiego to byłbym bardzo wdzięczny smile.gif)


Znalazłem coś taniego ale nie wiem jak pobrać dane z dwóch pul na raz po wyborze w drugim polu..
http://doman.art.pl/kursjs/kurs/jquery/jquery_ajax.html
kamil4u
18.06.2012, 17:49:03
Dobrze, ale z czym masz problem? Praktycznie wszystko masz napisane w linku, którym podałeś. Robisz tak:

- pod oba select-y podpinasz zdarzenie onchange, które wysyła żądanie POST do serwera przez AJAX. Te żądania to wartości z obu select-ów, nie ważne, który zmieniono
- W PHP odbierasz sobie te dane i swoim algorytmem wyznaczasz tablicę, która będzie zawierała informacje z trzeciego select-u
- Dane odbierasz i wysyłasz w taki sposób jak w linku, który podałeś
- gotowe

Napisz z czym masz konkretnie problem.

Cytat
dwóch pul na raz po wyborze w drugim polu..

http://www.sjp.pl/pul smile.gif
deus7
19.06.2012, 20:59:14
Właśnie nie wiem jak zmodyfikować skrypt żeby dobrał się do wartości w kategoria2
[HTML] pobierz, plaintext 
  1.     <select class="kategoria1">
  2.         <option value="0">Wybierz...</option>
  3.         <option value="Rzeczownik">Rzeczownik</option>
  4.         <option value="Czasownik">Czasownik</option>
  5.         <option value="Przymiotnik">Przymiotnik</option>
  6.     </select>
  7.  
  8.     <select class="kategoria2">
  9.         <option value="0">Wybierz...</option>
  10.         <option value="Pozytywny">Pozytywny</option>
  11.         <option value="Neutralny">Neutralny</option>
  12.         <option value="Negatywny">Negatywny</option>
  13.     </select>
  14.  
  15.  
  16. <select class="kategoria3" disabled="disabled">
  17.     <option value="0">---</option>
  18. </select>
[HTML] pobierz, plaintext


zmieniłem trochę kod js dodając: var zmienna2 = $('.kategoria2').val();

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.  $('.kategoria1').bind({
  4.     'change' : function() {
  5.         var wartosc = $(this).find('option:selected').val();   //pobieramy wartość wybranego selekta
  6.         var zmienna2 = $('.kategoria2').val();
  7.  
  8.         if (wartosc!=0) { //jeżeli jest inna niż -1 (czyli jeżeli został wybrany model)
  9.             $.ajax({
  10.                 type: "POST",
  11.                 url: "klasa-semantyczna.php",
  12.                 dataType : 'json',
  13.                 data: {
  14.                     gender : wartosc
  15.                 },
  16.                 success : function(json) {
  17.                     var $kategoria3 = $('.kategoria3');
  18.                     $kategoria3.attr('disabled',false); //aktywujemy 2 selekt
  19.                     $kategoria3.empty(); //czyscimy drugi selekt ze zdarzeń i optionów
  20.  
  21.                     for(i=0; i<json.length; i++) { //tworzymy optiony
  22.                        $kategoria3.append('<option value="'+json[i]['value']+'">'+json[i]['imie']+'</option>');
  23.                     }
  24.  
  25.                     //ustawiamy jako wybrany pierwszy option w selekcie 2
  26.                     $kategoria3.find('option').eq(0).attr('selected','selected');
  27.                 },
  28.                 error: function() {
  29.                     alert('wystąpił błąd :)');
  30.                 }
  31.             })
  32.         }
  33.     }
  34. });       
  35.  
  36. </script>
[HTML] pobierz, plaintext
kamil4u
19.06.2012, 21:48:26
Zrób to tak( zapisane pseudokodem ):
Kod
lista1.onchange = lista2.onchange = function(){
wartosc1 = lista1.wartosc;
wartosc2 = lista2.wartosc;

AJAX();
}


Czyli nie będziesz musiał pisać 2 razy tego samego kodu.

Co do problemu to: http://api.jquery.com/jQuery.ajax/ i Twój kod
Cytat
data: {
gender : wartosc
},
Wysyłasz tylko zmienną wartość, a musisz wysłać wartosc1 i wartosc2.

Poza tym nie kopiuj bezmyślnie gender=płeć - zmienne powinny być nazwane logicznie, nawet gdy to tylko przykład wink.gif

No i jeszcze musisz mieć sensowny plik "klasa-semantyczna.php"
deus7
20.06.2012, 01:52:18
zrobiłem to tak: 
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. var kategoria1 = document.getElementById("kategoria1");
  4. var kategoria2 = document.getElementById("kategoria2");
  5. kategoria1.onchange = kategoria2.onchange = function(){
  6.         if ((kategoria1==0) && (kategoria2==0)) { 
  7.             $.ajax({
  8.                 type: "POST",
  9.                 url: "klasa-semnatyczna.php",
  10.                 dataType: 'json',
  11.                 data: {
  12.                     kombinacja1: kategoria1,
  13.                     kombinacja2: kategoria2
  14.                 },
  15.                 success : function(json) {
  16.                     var $kategoria3 = $('.kategoria3');
  17.                     $kategoria3.attr('disabled',false); 
  18.                     $kategoria3.empty();
  19.  
  20.                     for(i=0; i<json.length; i++) { 
  21.                        $kategoria3.append('<option value="'+json[i]['value']+'">'+json[i]['imie']+'</option>');
  22.                     }
  23.  
  24.                     $kategoria3.find('option').eq(0).attr('selected','selected');
  25.                 },
  26.                 error: function() {
  27.                     alert('wystąpił błąd :)');
  28.                 }
  29.             })
  30.         }
  31.     }
  32. });       
  33.  
  34. </script>
  35. </head>
  36. <body>
  37. <form action="" method="POST">
  38.  
  39.     <select id="kategoria1">
  40.         <option value="0">Wybierz...</option>
  41.         <option value="1">Rzeczownik</option>
  42.         <option value="2">Czasownik</option>
  43.         <option value="3">Przymiotnik</option>
  44.     </select>
  45.  
  46.     <select id="kategoria2">
  47.         <option value="0">Wybierz...</option>
  48.         <option value="1">Pozytywny</option>
  49.         <option value="2">Neutralny</option>
  50.         <option value="3">Negatywny</option>
  51.     </select>
  52.  
  53.     <select id="kategoria3" disabled="disabled">
  54.         <option value="0">---</option>
  55.     </select>
  56.  
  57. </form>
[HTML] pobierz, plaintext

plik PHP:
[PHP] pobierz, plaintext 
  1. <?php
  2.     $kategoria1 = $_POST['kategoria1'];
  3.     $kategoria2 = $_POST['kategoria2'];
  4.  
  5.     $ttestowa = Array();
  6.  
  7.     $ttestowa['m'] = Array();
  8.  
  9.     $ttestowa['m'][0] = Array('imie'=>'Bartek', 'value'=>'1');
  10.     $ttestowa['m'][1] = Array('imie'=>'Bartek', 'value'=>'2');
  11.     $ttestowa['m'][2] = Array('imie'=>'Darek', 'value'=>'3');
  12.     $ttestowa['m'][3] = Array('imie'=>'Kamil', 'value'=>'4');
  13.     $ttestowa['m'][4] = Array('imie'=>'Michał', 'value'=>'5');
  14.  
  15.     echo json_encode($ttestowa['m']);
  16. ?>
[PHP] pobierz, plaintext


i nic się nie dzieje po wybraniu pozycji z list rozwijanych
adrianozo
20.06.2012, 10:34:06
Też kiedyś czegoś takiego potrzebowałem i jakoś wyskrobałem:

Kod
<select name="category" id="category">
        <option value="">Rodzaj:</option>
        <option value="1">Osłonki</option>
        <option value="2">Osłonki karo</option>
        <option value="3">Podstawki</option>
        <option value="4">Skrzynki</option>
        <option value="5">Podstawki pod skrzynkę</option>
        <option value="6">Muszelki</option>
        <option value="7">Donice</option>
        <option value="8">Donice Berta</option>
        <option value="9">Donice Kora</option>
        <option value="10">Podstawki Berta</option>
        <option value="11">Palmówki</option>
        <option value="12">Misy</option>
        <option value="13">Romby</option>
        <option value="14">Wkłady</option>
        <option value="15">Szpice</option>
        <option value="16">Gazony</option>
        <option value="17">Transparentne</option>
    </select>  
    <select name="sub_category" id="sub_category">
        <option value="">Produkt:</option>
    </select>
    <select name="sub_sub_category" id="sub_sub_category">
        <option value="">Kolor:</option>
    </select>


PHP:

[PHP] pobierz, plaintext 
  1. <?php
  2. $zap = mysql_query("SELECT * FROM tabela");
  3. $json = array();
  4. while($wiersz = mysql_fetch_array($zap))
  5. {
  6. 	if($_POST['type'] == $wiersz['type'])
  7. 	{
  8. 		$json[] = array(
  9. 			'value' => ''.$wiersz['value'].'',
  10. 			'text' => ''.$wiersz['nazwa'].''
  11. 		);
  12. 	}
  13. }
  14. echo json_encode($json);
  15. ?>
[PHP] pobierz, plaintext
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.