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
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
Multiple Liste Select cu JavaScript

Last accessed pages

  1. Creare si editare pagini HTML (31407)
  2. Jokes - Glume, Bancuri, Humor (2) (3121)
  3. Numerale, Numere in limba engleza - Numerals (25190)
  4. Subtantive - Plural (2165)
  5. Verbe neregulate din limba Engleza (8889)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1976)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1677)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1575)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1434)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1167)