Zależne od siebie rozwijane listy, 3 listy po wyborze dwóch pierwszych pojawiają się opcje w trzeciej. Opcje

[deus7]

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 )


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]

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.

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

http://www.sjp.pl/pul

[deus7]

Właśnie nie wiem jak zmodyfikować skrypt żeby dobrał się do wartości w kategoria2

[HTML] pobierz, plaintext 
    <select class="kategoria1">
        <option value="0">Wybierz...</option>
        <option value="Rzeczownik">Rzeczownik</option>
        <option value="Czasownik">Czasownik</option>
        <option value="Przymiotnik">Przymiotnik</option>
    </select>
 
    <select class="kategoria2">
        <option value="0">Wybierz...</option>
        <option value="Pozytywny">Pozytywny</option>
        <option value="Neutralny">Neutralny</option>
        <option value="Negatywny">Negatywny</option>
    </select>
 
 
<select class="kategoria3" disabled="disabled">
    <option value="0">---</option>
</select>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function() {
 $('.kategoria1').bind({
    'change' : function() {
        var wartosc = $(this).find('option:selected').val();   //pobieramy wartość wybranego selekta
        var zmienna2 = $('.kategoria2').val();
 
        if (wartosc!=0) { //jeżeli jest inna niż -1 (czyli jeżeli został wybrany model)
            $.ajax({
                type: "POST",
                url: "klasa-semantyczna.php",
                dataType : 'json',
                data: {
                    gender : wartosc
                },
                success : function(json) {
                    var $kategoria3 = $('.kategoria3');
                    $kategoria3.attr('disabled',false); //aktywujemy 2 selekt
                    $kategoria3.empty(); //czyscimy drugi selekt ze zdarzeń i optionów
 
                    for(i=0; i<json.length; i++) { //tworzymy optiony
                       $kategoria3.append('<option value="'+json[i]['value']+'">'+json[i]['imie']+'</option>');
                    }
 
                    //ustawiamy jako wybrany pierwszy option w selekcie 2
                    $kategoria3.find('option').eq(0).attr('selected','selected');
                },
                error: function() {
                    alert('wystąpił błąd :)');
                }
            })
        }
    }
});       
 
</script>
[HTML] pobierz, plaintext 

[kamil4u]

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

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

No i jeszcze musisz mieć sensowny plik "klasa-semantyczna.php"

[deus7]

zrobiłem to tak:

[HTML] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function() {
var kategoria1 = document.getElementById("kategoria1");
var kategoria2 = document.getElementById("kategoria2");
kategoria1.onchange = kategoria2.onchange = function(){
        if ((kategoria1==0) && (kategoria2==0)) { 
            $.ajax({
                type: "POST",
                url: "klasa-semnatyczna.php",
                dataType: 'json',
                data: {
                    kombinacja1: kategoria1,
                    kombinacja2: kategoria2
                },
                success : function(json) {
                    var $kategoria3 = $('.kategoria3');
                    $kategoria3.attr('disabled',false); 
                    $kategoria3.empty();
 
                    for(i=0; i<json.length; i++) { 
                       $kategoria3.append('<option value="'+json[i]['value']+'">'+json[i]['imie']+'</option>');
                    }
 
                    $kategoria3.find('option').eq(0).attr('selected','selected');
                },
                error: function() {
                    alert('wystąpił błąd :)');
                }
            })
        }
    }
});       
 
</script>
</head>
<body>
<form action="" method="POST">
 
    <select id="kategoria1">
        <option value="0">Wybierz...</option>
        <option value="1">Rzeczownik</option>
        <option value="2">Czasownik</option>
        <option value="3">Przymiotnik</option>
    </select>
 
    <select id="kategoria2">
        <option value="0">Wybierz...</option>
        <option value="1">Pozytywny</option>
        <option value="2">Neutralny</option>
        <option value="3">Negatywny</option>
    </select>
 
    <select id="kategoria3" disabled="disabled">
        <option value="0">---</option>
    </select>
 
</form>
[HTML] pobierz, plaintext 

plik PHP:

[PHP] pobierz, plaintext 
<?php
    $kategoria1 = $_POST['kategoria1'];
    $kategoria2 = $_POST['kategoria2'];
 
    $ttestowa = Array();
 
    $ttestowa['m'] = Array();
 
    $ttestowa['m'][0] = Array('imie'=>'Bartek', 'value'=>'1');
    $ttestowa['m'][1] = Array('imie'=>'Bartek', 'value'=>'2');
    $ttestowa['m'][2] = Array('imie'=>'Darek', 'value'=>'3');
    $ttestowa['m'][3] = Array('imie'=>'Kamil', 'value'=>'4');
    $ttestowa['m'][4] = Array('imie'=>'Michał', 'value'=>'5');
 
    echo json_encode($ttestowa['m']);
?>
[PHP] pobierz, plaintext 

i nic się nie dzieje po wybraniu pozycji z list rozwijanych

[adrianozo]

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 
<?php
$zap = mysql_query("SELECT * FROM tabela");
$json = array();
while($wiersz = mysql_fetch_array($zap))
{
	if($_POST['type'] == $wiersz['type'])
	{
		$json[] = array(
			'value' => ''.$wiersz['value'].'',
			'text' => ''.$wiersz['nazwa'].''
		);
	}
}
echo json_encode($json);
?>
[PHP] pobierz, plaintext