Multiple Liste Select cu JavaScript

Curs Javascript

• Dublu Select List

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:
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:

<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>

#id {
  font-weight: 800;
}

function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);

$vname = 8;
echo $vname;

We have traveled in space.
- Noi am calatorit (deja) in spatiu.

La niña pintaba un arco iris.
- Fetita picta un curcubeu.