In acest tutorial puteti invata cum sa creati Multiple Liste Select cu JavaScript, mai exact, un Triplu si un Dublu Select list (denumite si Drop Down lists).
In codul HTML din pagina se creaza prima lista select, si tag-uri HTML goale in care vor fi afisate cu JavaScript celelalte liste select si textul cand e selectata o optiune din ultimul Select.
Dupa acest cod HTML, se adauga codul JavaScript cu Obiecte (in format JSON) ce contin optiunile pentru celelalte selecturi, si continutl text afisat dupa ultimul Select.
Cand utilizatorul selecteaza o optiune, este apelata o functie JavaScript care va adauga urmatorul Select. Cand e selectata o optiune din ultima lista select, va fi afisat un continut text (care poate sa contina si elemente HTML) asociat cu optiunea selectata.

Triplu Select list

Iata codul pentru trei liste Select (explicatiile sunt in comentariile din cod):
<!-- Prima lista select -->
Selecteaza Optiune: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="s1_opt1">S1 Option1</option>
 <option value="s1_opt2">S1 Option2</option>
</select>
<!-- Tag-uri pt. celelalte 2 select-uri si pt. text -->
<span id="slist2"></span> <span id="slist3"></span> <div id="scontent"></div>

<script><!--
/* Script Triplu Select Dropdown List, de la: marplo.net/javascript/ */
var SList = new Object();             // obiect JS care va stoca optiunile si textul

// Aici inlociti cu textul ce va fi afisat langa select
var txtsl2 = 'Selecteaza Optiune:';         // text pt. a doua lista select
var txtsl3 = 'Selecteaza Optiune:';         // text pt. a treia lista select

/*
 Proprietate cu optiuni  pt. a doua lista select
 Cheile din acest obiect trebuie sa corespunda cu valorea fiecarei optiuni din primul Select
 Valorile din Array-ul asociat fiecarei chei reprezinta optiunile pt. a doua lista select
*/
SList.slist2 = {
 "s1_opt1": ['s1o1_opt1', 's1o1_opt2'],
 "s1_opt2": ['s1o2_opt1', 's1o2_opt2'],
};

/*
 Proprietate cu optiuni  pt. a treia lista select
 Cheile din acest obiect trebuie sa corespunda cu valorile (optiunile) din fiecara Array din "slist2"
 Valorile din Array-ul asociat fiecarei chei reprezinta optiunile pt. a treia lista select
*/
SList.slist3 = {
 "s1o1_opt1": ['s2o1_1_opt1', 's2o1_1_opt2'],
 "s1o1_opt2": ['s2o1_2_opt1', 's2o1_2_opt2'],
 "s1o2_opt1": ['s2o2_1_opt1', 's2o2_1_opt2'],
 "s1o2_opt2": ['s2o2_2_opt1', 's2o2_2_opt2'],
};

/*
 Proprietate cu text pt optiunile din al treilea select
 Cheile din acest obiect trebuie sa corespunda cu valorile (optiunile) din fiecara Array din "slist3"
 Valoarea de la fiecare cheie este textul ce va fi afisat dupa ce e selectata o optiune din al treilea Select
*/
SList.scontent = {
 "s2o1_1_opt1": 'Textul pt. s2o1_1_opt1',
 "s2o1_1_opt2": 'Textul pt. s2o1_1_opt2',
 "s2o1_2_opt1": 'Textul pt. s2o1_2_opt1',
 "s2o1_2_opt2": 'Textul pt. s2o1_2_opt2',
 "s2o2_1_opt1": 'Textul pt. s2o2_1_opt1',
 "s2o2_1_opt2": 'Textul pt. s2o2_1_opt2',
 "s2o2_2_opt1": 'Textul pt. s2o2_2_opt1',
 "s2o2_2_opt2": 'Textul pt. s2o2_2_opt2',
};

    /* De aici nu e nevoie sa modificati */

// functie ce va defini si afisa listele select si textul
SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';           // sterge continutul-text

  if(SList[slist][option]) {
    // daca e optiune din ultimul select, afiseaza textul, altfel, urmatorul select
    if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
    else {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }

      // switch cu "case" pt. fiecare lista select
      switch(slist) {
        case 'slist2':
          document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'slist3\', this.value);">'+addata+'</select>';
          document.getElementById('slist3').innerHTML = '';
          break;
        case 'slist3':
          document.getElementById('slist3').innerHTML = txtsl3+' <select name="slist3" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
          break;
      }
    }
  }
  else {
    // sterge datele din tag-urile pt select-uri
    if(slist == 'slist2') {
      document.getElementById('slist2').innerHTML = '';
      document.getElementById('slist3').innerHTML = '';
    }
    else if(slist == 'slist3') {
      document.getElementById('slist3').innerHTML = '';
    }
  }
}
--></script>

Codul de mai sus va crea acest rezultat:
Selecteaza Optiune:

IMPORTANT:
- Nu schimbati numele variabilelor, sau ID-ul tag-urilor HTML in care vor fi afisate listele select si textul.
- In codul JavaScript, "slist2" contine Array-uri (datele din parantezele patrate [...]) cu optiunile pentru a doua lista Select, fiecare Array trebuie asociat cu o optiune din primul Select.
- "slist3" contine Array cu optiuni pt. a treia lista Select; fiecare Array trebuie asociat cu o optiune adaugata in Array-urile din "slist2"
- "scontent" contine textul pt. fiecare optiune adaugata in Array-urile din "slist3".

Daca vreti sa nu mai fie afisat vreun text dupa selectarea unei optiuni din al treilea Select, stergeti acest cod din script:
            onchange="SList.getSelect(\'scontent\', this.value);"     (sub: case 'slist3': ).

Dublu Select List

Daca vreti sa creati un Dublu Select list, puteti folosi codul din urmatorul exemplu; doar modificati datele din "slist2" si "scontent".
- Exemplu cu doua liste Select:
<!-- Prima lista select -->
Select WebSite: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
 <option>- - -</option>
 <option value="marplo">MarPlo.net</option>
 <option value="coursesweb">CoursesWeb.net</option>
</select>
<!-- Tag-uri pt. al doilea select si pt. text -->
<span id="slist2"></span> <div id="scontent"></div>

<script><!--
/* Script Dublu Select Dropdown List, de la: marplo.net/javascript/ */
var SList = new Object();             // obiect JS care va stoca optiunile si textul

Aici inlociti cu textul ce va fi afisat langa select
var txtsl2 = 'Select Categorie:';

/*
 Proprietate cu optiuni pt. a doua lista select
 Cheile din acest obiect trebuie sa corespunda cu valorea fiecarei optiuni din primul Select
 Valorile din Array-ul asociat fiecarei chei reprezinta optiunile pt. a doua lista select
*/
SList.slist2 = {
 "marplo": ['ajax', 'games', 'anime'],
 "coursesweb": ['php-mysql', 'javascript', 'flash-as3']
};

/*
 Proprietate cu text pt optiunile din al doilea select
 Cheile din acest obiect trebuie sa corespunda cu valorile (optiunile) din fiecara Array din "slist2"
 Valoarea de la fiecare cheie este textul ce va fi afisat dupa ce e selectata o optiune din al doilea Select
*/
SList.scontent = {
 "ajax": 'marplo.net/ajax/',
 "games": 'marplo.net/jocuri/',
 "anime": 'marplo.net/anime/',
 "php-mysql": 'www.coursesweb.net/php-mysql/',
 "javascript": 'www.coursesweb.net/javascript/',
 "flash-as3": 'www.coursesweb.net/flash/'
};

    /* De aici nu e nevoie sa modificati */

// functie ce va defini si afisa listele select si textul
SList.getSelect = function(slist, option) {
  document.getElementById('scontent').innerHTML = '';           // sterge continutul-text

  if(SList[slist][option]) {
    // daca e optiune din ultimul select, afiseaza textul, altfel, urmatorul select
    if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
    else if(slist == 'slist2') {
      var addata = '<option>- - -</option>';
      for(var i=0; i<SList[slist][option].length; i++) {
        addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
      }

      document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
    }
  }
  else if(slist == 'slist2') {
    // sterge datele din tag-ul pt. al doilea select
    document.getElementById('slist2').innerHTML = '';
  }
}
--></script>

- Acest cod va afisa urmatorul rezultat:
Select WebSite:

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Multiple Liste Select cu JavaScript

Last accessed pages

  1. Curs PHP MySQL, Tutoriale si Scripturi PHP (9984)
  2. Pronumele in limba engleza - Pronouns (16296)
  3. Gramatica limbii engleze - Prezentare Generala (92208)
  4. Tutorial JQuery WebDesign (240)
  5. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (25247)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2253)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (871)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (718)
  4. Exercitii engleza - English Tests and exercises - Grammar (675)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (606)