Curs Javascript

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 tag se foloseste pentru a include fisier extern CSS in pagina web?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Ce proprietate CSS seteaza marimea textului?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicati proprietate JavaScript care poate sa adauge cod HTML intr-un element.
text value innerHTML
document.getElementById("someID").innerHTML = "Continut HTML";
Clic pe functia care returneaza numarul de caractere dintr-un sir in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
Care este forma de feminin a adjectivului "white" (alb)?
white whitea whites
(In limba engleza adjectivele au aceeasi forma pt. ambele genuri)
The snow is white. - Zapada e alba.
Care este forma de feminin a adjectivului "blanco" (alb)?
blanc blance blanca
La nieve es blanca.
- Zapada e alba.
Multiple Liste Select cu JavaScript

Last accessed pages

  1. Lucru cu fisiere 2 (842)
  2. PHP MySQL - WHERE si LIKE (791)
  3. Poezii pentru copii, in engleza (40143)
  4. Limba spaniola curs online incepatori si avansati (29292)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (67850)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (817)
  2. Exercitii engleza - English Tests and exercises - Grammar (360)
  3. Coduri pt culori (347)
  4. Cursuri limba engleza gratuite si lectii online (338)
  5. Gramatica limbii engleze - Prezentare Generala (332)