[JavaScript]Jeden select zależny od drugiego

0

Próbuje to cały czas ogarnąć ale mi nie idzie. Myślę, że dobrym sposobem byłoby jQuery, tylko zupełnie nie wiem jak zabrać się za to... Mógłbym prosić o pomoc? Przeszukałem google, ale nie znalazłem nic ciekawego.

0

przygotuj sobie wszystkie wersje drugiego selecta i przy zamianie pierwszego podmieniaj zawartość drugiego, najkrócej będzie atrybutem innerHTML

0

A jeśli drugi jest zależny od pierwszego, a później trzeci od drugiego?

0

to opisz pełny problem, co właściwie chcesz stworzyć z tymi selectami

0

Widzę tu zastosowanie wzorca Observer, choć dla dwóch selectów nie ma sensu aż takich rzeczy implementować. Użyj po prostu zdarzenia onchange obydwóch selectów. W jednym zmieniasz drugiego, w drugim tego pierwszego.

<select id="sel1" onchange="zmienDrugiego();"></select>
<select id="sel2" onchange="zmienPierwszego();"></select>
0

Mam pierwszego selecta, który jest aktywny(reszta jest selected) i jak wybiorę jakąś wartość z pierwszego to wtedy uaktywnia się drugi, w którym są tylko możliwości przypisane do pierwszego np. z pierwszego wybiorę Audi to w drugim pokazują się tylko wersje Audi, a jak wybiorę BMW to tylko BMW. I później po wybraniu w drugim seleccie dajmy na to A6 to w trzecim mamy do wyboru pojemności silnika, w zależności od tego jaką wersje wybraliśmy.

0

więc dane mają "charakter drzewiasty", nie wiem ile ich masz, ale pewnie dość dużo, zbudowałbym w javascriptcie drzewko z wszystkimi danymi
oraz funkcję powiedzmy

function loadSelects(nrSelektaWywolujacegoZdarzenieZmiany)

która wykorzystując dane z kolejnych selektów przechodzi po drzewku danych aż dojdzie do odpowiedniego poziomu (któremu odpowiadający select wywołał zdarzenie) i wtedy do następnego selekta ładuje to co w drzewku wychodzi, że jest dzieckiem tej opcji, która została zaznaczona

nie jestem pewien, czy to jest jasne, w razie czego pytaj :p

0

http://pawlowska.com.pl/zamowienie.php

Chodzi o dokładnie identyczne dane jak tutaj :)

0

no to wydaje mi się, że mój pomysł się chyba nada, z tym, że mój jest dla dowolnie długich drzewek;D

spróbuj zaimplementować :)

0

Tylko jest problem bo ja w JS to laik :]

0

więc do nauki :) javascript nie jest trudny, jeśli programowałeś już obiektowo (chociaż tworzenie własnych klas pewnie Cię zaskoczy ;p )

0

Obiektówka = czarna magia, JS - coś tam ogarniam ale kiepsko

0

Eetam, żeby podstawy opanować niewiele trzeba. Kilka tutoriali i sie nauczysz.

0

Ja mam w domu książkę pt: PO PROSTU JavaScript i Ajax, ale to jakieś nie wiem co ;p nic prawie z tego nie rozumiem oprócz podstaw zaczerpniętych już poniekąd z C++ oraz PHP

0

http://www.w3schools.com/js/default.asp to zacznij na przykład od tego albo jakiegoś innego tutoriala

0

Już jakiś tam skrypcik znalazłem, ale mam problem

Po wybraniu całego szeregu selectów i po kliknięciu dodaj produkt chcę, żeby pokazało się to co wybrałem i mogę wybrać drugi produkt, znów dodam i będą dwie wartości, które dodałem, a koło nich będzie przycisk x i będę mógł później usunąć jak się pomylę.

Z usuwaniem nie ma problemu bo mam już napisane, natomiast nie wiem jak zrobić dodawanie oczywiście w jQuery.

0

Dodaj kopię, albo identyczny element do DOM ze zmienioną nazwą etc.

0

Nie rozumiem. Mógłbym prosić przykład?

0
nansss napisał(a)

Ja mam w domu książkę pt: PO PROSTU JavaScript i Ajax, ale to jakieś nie wiem co ;p nic prawie z tego nie rozumiem oprócz podstaw zaczerpniętych już poniekąd z C++ oraz PHP

JavaScript wbrew pozorom mocno się różni od C++, PHP i wielu innych popularnych języków. JavaScript jest obiektowy -- może i bardziej niż C++ czy PHP, bo w JS możesz napisać np. 123.456.toPrecision(2) -- ale jednocześnie JavaScript nie posiada klas ani klasycznego dziedziczenia. Ma taką moc ekspresyjną, że można te cechy symulować, ale nie wspiera ich wprost. Co najwyżej udaje, wprowadzając mylące słowo kluczowe new, które zresztą powoduje, że dziedziczenie prototypowe jest w JS mniej wygodne niż mogłoby być (na szczęście można to łatwo naprawić pisząc jedną krótką funkcję). Zamiast dziedziczenia klasycznego, w JavaScripcie jest dziedziczenie prototypowe. Może nawet to ono jest bardziej intuicyjne. Obiekty dziedziczą tu po obiektach, a nie po jakichś klasach. Do tego, JavaScript to jednak język funkcyjny, z bardzo potężnym narzędziem jakim są domknięcia. Tego z kolei PHP i C++ nie mają -- a jak mają, to gorzej zrobione.

Trochę bez sensu jest opieranie się na C++ i PHP gdy piszesz JavaScript. Te dwa języki mogłyby prędzej posłużyć za podstawę do nauki Javy czy C# (przynajmniej w przypadku C++). Zdecydowanie polecam nauczenie się samego języka JavaScript z jakiejś dobrej książki stworzonej do tego celu. Konkretnie, polecam zawsze "JavaScript - mocne strony" Douglasa Crockforda. Nie uświadczysz tam Ajaxu ani gotowych skryptów, które zrobią coś widocznego dla użytkownika, ale trudno o lepszą książkę do nauki języka. Kod jest, przykłady i gotowce są, ale np. ułatwiające manipulację obiektami, a nie powiedzmy konkretnym formularzem na stronie. Do tego, książka jest bardzo zwięzła i logicznie, zrozumiale napisana.

notexists napisał(a)

http://www.w3schools.com/js/default.asp to zacznij na przykład od tego albo jakiegoś innego tutoriala

Nieeeeeeeeeeee! Tylko nie W3Schools! Oni są be, wbrew pozorom! Z W3C nie mają nic wspólnego. Promują złe praktyki. Nawet kod ich strony jest żałosny. W niektórych miejscach zwyczajnie piszą nieprawdę.

Polecam np. materiały na MDC. Z tutoriali to jest tam coś takiego: https://developer.mozilla.org/en/JavaScript/Guide .

Google też ma dobre materiały w formie filmów video: http://code.google.com/intl/pl/edu/submissions/html-css-javascript/

Przyznam, że ja materiałów dla początkujących (samouczki, tutoriale) za bardzo nie czytam. Powyższe źródła podaję na podstawie jakości ichniej dokumentacji, z której korzystam na co dzień. Oraz na podstawie opinii innych wtajemniczonych developerów ;).

Świetne bywają również materiały Douglasa Crockforda (kolesia od książki, którą polecałem), tylko część z nich jest starych i np. w kodzie HTML nie ma DOCTYPE-a. Trochę to żałosne, ale jeśli samemu ogarnia się chociaż ten HTML, to można niektóre głupoty odrzucać. Co ciekawe, Crockford swego czasu wręcz promował część z tych "głupot", np. by nie podawać atrybutu type w elementach script, bo to bez sensu. Pomijanie atrybutu type było niezgodne ze specyfikacją (X)HTML, ale będzie już zgodne... z HTML-em 5, bo autorzy zauważyli, że faktycznie te atrybuty są zwykle zbędne. Polecam zajrzeć na http://javascript.crockford.com/ , można też wygooglować filmiki z jego wykładów.

0

Mam pytanie. Jak pobrać do zmiennej wartość selecta?

Mając taki option:

<option value="1">Osłonki</option>

Nie chodzi mi o value czyli 1 tylko o nazwę czyli Osłonki

0

Użyj nie option.value, tylko option.text. Dla aktualnie wybranego pola z selecta byłoby to coś takiego:

mySelect.options[mySelect.selectedIndex].text
0

Już powoli zbliżam się do końca:

Rozwiązanie

var category = $("#category option:selected").text();

EDIT:


Teraz pozostaje pytanie jak przesłać to do PHP,

Chodzi o to, że dodam sobie kilka takich produktów:

Rodzaj: Podstawki pod skrzynkę - Produkt: Podstawka pod skrzynk? l 70 - Kolor: - Ilość: 200 X
Rodzaj: Osłonki - Produkt: Os?onka 15 - Kolor: - Ilość: 60 X
Rodzaj: Osłonki - Produkt: Os?onka 8 - Kolor: dasda - Ilość: 60 X
Rodzaj: Skrzynki - Produkt: Skrzynka l 70 - Kolor: - Ilość: 50 X

i chcę dokładnie te linijki przesłać do PHP.
Jak to można zrobić?

EDIT 2:

Coś takiego wykombinowałem, ale nie wiem czy dobrze:

$.ajax({
		var slij = calosc;
		type: "POST",
		data: slij,
		cache: false,
		url: 'strona/zamowienie.php',
		timeout: 2000,
		error: function() {
			alert("Blad");
		},
		success: function(data) { 
			
		}
	})

i nie wiem co dać w success

0

Teoretycznie działa, ale pokazuje tylko pierwszy wybór, a nie wszystkie:

var calosc = '<br /><br />Rodzaj: '+category+' - Produkt: '+sub_category+' - Kolor: '+sub_sub_category+' - Ilość: '+ilosc+'';
		$('#box').load('strona/data.php', {cale: calosc});
<?php 
echo '<strong>Twoje zamówienie:</strong>';
echo $_POST['cale']; 
echo '<br />';
?>
<a href="#add" class="add">Dodaj produkt</a><br /><br /><br />
	<div id="box"></div><br /><br /><br />
0

pierwszy wybór z kolejnych "liści drzewa" wskazanych przez użytkownika?

0

Ostatni wybór. A chciałbym wszystkie.

0

więc po wskazaniu musisz gdzieś zapisywać, że dany element został wskazany, najładniej jakbyś miał listę (przy czym nie mam na myśli

    1. tylko koncepcyjnie) dodanych elementów i to ona jest wysyłana, z takiej listy mógłbyś też łatwo usuwać elementy; natomiast same selekty służyłyby do dodawanie elementu do listy</p>

obecnie dodajesz tylko to co jest wskazane na selektach, a wskazane jest zawsze to co ostatnio wskazałeś, a o poprzednich nie ma informacji

0

Wykorzystałem jednak input hidden :)

0

też może być :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1