Cascading Dropdowns

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Cascading Dropdowns

Δημοσίευση από cherouvim » 16 Ιούλ 2006 19:45

Είναι πολλές οι φορές που θέλουμε να φιλτράρουμε τα <option> elements ενός <select> (dropdown menu στην HTML) με βάση κάπια επιλογή σε προηγούμενο dropdown. Αυτό θέλουμε να συμβεί στο client-side, και αν είναι δυνατόν να δουλεύει και χωρίς javascript. Μία πιθανή λύση ακολουθεί.
<label for="categories">categories: </label>
<select name="categories" id="categories">
<option value="1">people</option>
<option value="2">food</option>
<option value="3">computer parts</option>
<option value="4">other</option>
</select><br/>

<label for="items">items: </label>
<select name="items" id="items">
<option class="1" value="0">john</option>
<option class="1" value="1">george</option>
<option class="1" value="2">marika</option>
<option class="1" value="3">kostas</option>
<option class="1" value="4">petros</option>
<option class="1" value="5">aleksis</option>
<option class="1" value="6">nikos</option>
<option class="1" value="7">niki</option>
<option class="1" value="8">haris</option>
<option class="2" value="9">frouto</option>
<option class="2" value="10">milo</option>
<option class="2" value="11">souvlaki</option>
<option class="2" value="12">pagoto</option>
<option class="2" value="13">mpyra</option>
<option class="2" value="14">nero</option>
<option class="2" value="15">cocacola</option>
<option class="2" value="16">patates</option>
<option class="3" value="17">othoni</option>
<option class="3" value="18">pliktrologio</option>
<option class="3" value="19">mouse</option>
<option class="3" value="20">skliros diskos</option>
<option class="3" value="21">floppy</option>
<option class="3" value="22">modem</option>
<option class="3" value="23">router</option>
<option class="3" value="24">dsl</option>
<option class="4" value="25">foo</option>
<option class="4" value="26">bar</option>
</select>
Στο HTML μου έχω συνδέσει το value τών options του select#categories με τα options tou select#items. Η σύνδεση γίνεται ορίζοντας κλάση σε κάθε select#items option με το value του εκάστοτε select#category option.
Το script θα αναλάβει στο onchange του #category να εμφανίσει μόνο τα #item options που του ανήκουν.

Κώδικας: Επιλογή όλων

function applyCascadingDropdown&#40;sourceId, targetId&#41; &#123;
	var source = document.getElementById&#40;sourceId&#41;;
	var target = document.getElementById&#40;targetId&#41;;
	if &#40;source && target&#41; &#123;
		source.onchange = function&#40;&#41; &#123;
			displayOptionItemsByClass&#40;target, source.value&#41;;
		&#125;
		displayOptionItemsByClass&#40;target, source.value&#41;;
	&#125;
&#125;

function displayOptionItemsByClass&#40;selectElement, className&#41; &#123;
	if &#40;!selectElement.backup&#41; &#123;
		selectElement.backup = selectElement.cloneNode&#40;true&#41;;
	&#125;
	var options = selectElement.getElementsByTagName&#40;"option"&#41;;
	for&#40;var i=0, length=options.length; i<length; i++&#41; &#123;
		selectElement.removeChild&#40;options&#91;0&#93;&#41;;
	&#125;
	var options = selectElement.backup.getElementsByTagName&#40;"option"&#41;;
	for&#40;var i=0, length=options.length; i<length; i++&#41; &#123;
		if &#40;options&#91;i&#93;.className==className&#41;
			selectElement.appendChild&#40;options&#91;i&#93;.cloneNode&#40;true&#41;&#41;;
	&#125;
&#125;
Στο window.onload θέλουμε να συνδέσουμε το #categories με το #items.

Κώδικας: Επιλογή όλων

window.onload=function&#40;&#41; &#123;applyCascadingDropdown&#40;"categories", "items"&#41;&#125;;
Φυσικά τίποτα δεν μας εμποδίζει να ενώσουμε παραπάνω από 2 διαδοχικά dropdowns.

Κώδικας: Επιλογή όλων

function applyCascadingDropdowns&#40;&#41; &#123;
	applyCascadingDropdown&#40;"categories", "items"&#41;;
	applyCascadingDropdown&#40;"items", "foo"&#41;;
&#125;

window.onload=applyCascadingDropdowns;
Μιονέκτημα αποτελεί το γεγονός ότι το markup (HTML) πρέπει ήδη να περιέχει όλα τα options. Αν μιλάμε για χιλιάδες επιλογές τότε θα έχουμε μεγάλο χρόνο φορτώματος της σελίδας, όπου μία ajax λύση θα ήταν καλύτερη (θα μας έσπαγε την εφαρμογή όμως, μιας και δεν θα λειτουργούσε χωρίς javascript).

Live demo @ http://temp.cherouvim.com/forums/cascading-dropdowns

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Cascading Dropdowns

Δημοσίευση από skeftomilos » 17 Ιούλ 2006 04:41

Το ίδιο πρόβλημα επιχείρησε να λύσει και ο Ολλανδός πριν κάμποσο καιρό, και μάλιστα το προσέγγισε με πολύ παρόμοιο τρόπο. :)
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Cascading Dropdowns

Δημοσίευση από cherouvim » 17 Ιούλ 2006 08:26

Απίστευτο! Τον είχα δει το τίτλο του post αλλά μάλλον δε το είχα διαβάσει ποτέ. Σκέψου ότι ετοιμαζόμουν να κάνω και το groupάρισμα με τα optgroups.

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

Cascading Dropdowns

Δημοσίευση από _Invisible_ » 18 Νοέμ 2006 01:38

Εγώ έχω ένα πρόβλημα με αυτό:

Δημιούργησα αυτή την φόρμα:

Κώδικας: Επιλογή όλων

<label for="categories"></label>
                    <select name="categories" id="categories">
                      <option value="1">&#123;L_HOTEL&#125;</option>
					  <option value="2">&#123;L_VILES&#125;</option>
					  <option value="3">&#123;L_ROOMS&#125;</option>
					</select>
                  </td>
                </tr>
                <tr>
                  <td>
<label for="items"></label>
<select name="items" id="items">
	<option class="1" value="0">&#123;L_DEPARTMENT&#125;&#58;</option>
	<option class="1" value="1">&#123;L_MACEDONIA&#125;</option>
	<option class="1" value="2">&#123;L_THRAKI&#125;</option>
	<option class="1" value="3">&#123;L_THESSALIA&#125;</option>

	<option class="1" value="4">&#123;L_IPIROS&#125;</option>
	<option class="1" value="5">&#123;L_CENTRAL_GREECE&#125;</option>
	<option class="1" value="6">&#123;L_PELOPONNESE&#125;</option>
	<option class="1" value="7">&#123;L_IONIAN_ISLANDS&#125;</option>
	<option class="1" value="8">&#123;L_SPORADES&#125;</option>
	<option class="1" value="9">&#123;L_AEGEAN_ISLANDS&#125;</option>

	<option class="1" value="10">&#123;L_CYCLADES&#125;</option>
	<option class="1" value="11">&#123;L_DODEKANISA&#125;</option>
	<option class="1" value="12">&#123;L_CRETE&#125;</option>
	<option class="2" value="13">mpyra</option>
	<option class="2" value="14">nero</option>
	<option class="2" value="15">cocacola</option>

	<option class="2" value="16">patates</option>
	<option class="2" value="17">othoni</option>
	<option class="2" value="18">pliktrologio</option>
	<option class="2" value="19">mouse</option>
	<option class="2" value="20">skliros diskos</option>
	<option class="2" value="21">floppy</option>

	<option class="2" value="22">modem</option>
	<option class="2" value="23">router</option>
	<option class="2" value="24">dsl</option>
	<option class="2" value="25">foo</option>
	<option class="2" value="26">bar</option>
	
	<option class="3" value="27">mpyra</option>
	<option class="3" value="28">nero</option>
	<option class="3" value="29">cocacola</option>

	<option class="3" value="30">patates</option>
	<option class="3" value="31">othoni</option>
	<option class="3" value="32">pliktrologio</option>
	<option class="3" value="33">mouse</option>
	<option class="3" value="34">skliros diskos</option>
	<option class="3" value="35">floppy</option>

	<option class="3" value="36">modem</option>
	<option class="3" value="37">router</option>
	<option class="3" value="38">dsl</option>
	<option class="3" value="39">foo</option>
	<option class="3" value="40">bar</option>

<label for="cities"></label>
<select name="cities" id="cities">
	<option class="1" value="0">depart</option>
	<option class="1" value="1">makedonia</option>
	<option class="1" value="2">thraki</option>
	<option class="1" value="3">qweasd</option>
	<option class="2" value="4">zxcasd</option>
	<option class="3" value="5">stokas?!</option>

	<option class="2" value="5">fghvbn</option>
</select>
αλλά θέλω όταν ανοίγει η σελίδα και έχει την τιμή για να επιλέξουμε γεωγραφικό διαμέρισμα, να μην εμφανίζει στις πόλεις, τις πόλεις! Επίσης, μετά, όταν κάνουμε κλικ πχ στην Ήπειρο, να μας εμφανίσει τις πόλεις της Ηπείρου. Ο κώδικας που σας έδωσα παραπάνω δεν δουλεύει για το τρίτο box και τα εμφανίζει όλα μαζί.

Η βοήθειά σας θα εκτιμούνταν.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Cascading Dropdowns

Δημοσίευση από cherouvim » 18 Νοέμ 2006 08:05

Στο window.onload πρέπει και να κάνεις τις συνδέσεις που θέλεις. π.χ

Κώδικας: Επιλογή όλων

window.onload=function&#40;&#41; &#123;
	applyCascadingDropdown&#40;"categories", "cities"&#41;
&#125;;

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

Cascading Dropdowns

Δημοσίευση από _Invisible_ » 18 Νοέμ 2006 11:44

Χίλια ευχαριστώ!!!!! Δεν είμαι καλός με την Javascript (τώρα άρχισα να διαβάζω tutorials) και έχω απορίες... Πολύ ωραίo script guys, τέλειο και ευχαριστώ πολύ για την βοήθειά σας

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

Cascading Dropdowns

Δημοσίευση από _Invisible_ » 10 Ιαν 2007 16:48

Γεια σας και πάλι.

Τελικά έχω μία ακόμη ερώτηση. Έχω συνδέσει 3 boxes σε μία φόρμα. Φανταστείτε, ότι το πρώτο box επιλέγει κάτι, και μετά πρέπει στο δεύτερο και μετά στο τρίτο.

Ας πούμε ότι στο πρώτο έχουμε 10 επιλογές. Αν η επιλογή από το πρώτο box είναι η Χ τότε στο δεύτερο box θα βγούνε X επιλογές. Σε κάποια επιλογή στο δεύτερο box έχω μόνο μία επιλογή και δεν κάνει "refresh" την τρίτη γιατί πρέπει να το επιλέξεις για να το εμφανίσει.

Γνωρίζετε πως μπορώ να το διορθώσω;

Ευχαριστώ πολύ.

Άβαταρ μέλους
_Invisible_
Δημοσιεύσεις: 418
Εγγραφή: 16 Νοέμ 2006 16:47
Τοποθεσία: Greece

Cascading Dropdowns

Δημοσίευση από _Invisible_ » 16 Ιαν 2007 16:53

κανένας??????

Άβαταρ μέλους
papatzas
Δημοσιεύσεις: 227
Εγγραφή: 03 Δεκ 2005 14:23

Cascading Dropdowns

Δημοσίευση από papatzas » 19 Φεβ 2007 00:32


Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες