Curs Javascript

In acest tutorial e prezentat un obiect Javascript (denumit adOption) cu metode ce pot fi folosite pentru a adauga si sterge optiuni intr-o lista Select, utilizand JavaScript.

Lista Select este initial goala.
Cand utilizatorul introduce un text intr-o casuta de text si apasa clic pe butonul "Adauga Optiune", valoarea din caseta text este adaugata ca optiune in lista select. Daca e goala caseta de text, sau daca exista deja o optiune cu acea valoare, este afisat un mesaj alert.
Cand utilizatorul adauga un text in casuta de text si apasa butonul "Sterge Optiune", optiunea cu acea valoare e stearsa din lista select. Daca valoarea nu este prezenta in lista, va fi afisat un alert ca valoarea nu exista.
Cand utilizatorul selecteaza o optiune din lista select, valoarea ei este adaugata in caseta de text.


Pentru explicatii despre cod, vedeti comentariile adaugate in script.

<form id="exfrm" action="" method="post">
  Lista Select:<br/>
  <select name="sel_list" id="sel_list" size="2" onchange="adOption.selOpt(this.value, 'optval')"> </select><br/><br/>
  Adauga o optiune: <input type="text" name="optval" id="optval" /><br /><br/>
  <input type="button" id="addopt" name="addopt" value="Adauga Optiune" onclick="adOption.addOption('sel_list', 'optval');" /> &nbsp;
  <input type="button" id="del_opt" name="del_opt" value="Sterge Optiune" onclick="adOption.delOption('sel_list', 'optval');" />
</form>
<script type="text/javascript"><!--
// cursuri gratuite - marplo.net

// creare obiect cu metode de adaugare si stergere <option></option>
var adOption = new Object();
  // method care verifica daca optiunea e deja in list
  // primeste id-ul listei <select></select>, si a casutei de text cu valoarea pt. <option>
  adOption.checkList = function(list, optval) {
    var re = 0;           // variabila ce va fi returnata

    // preia elementele <option>
    var opts = document.getElementById(list).getElementsByTagName('option');

    // daca optiunea exista, seteaza re=1
    for(var i=0; i<opts.length; i++) {
      if(opts[i].value == document.getElementById(optval).value) {
        re = 1;
        break;
      }
    }

    return re;         // returneaza valoarea lui re
   };

   // metoda care adauga <option>
  adOption.addOption = function(list, optval) {
    // poreia valoarea pt. <option>
    var opt_val = document.getElementById(optval).value;

    // verifica daca e adaugata valoare in caseta de text
    if(opt_val.length > 0) {
      // verifica sa nu existe deja acea optiune (cand checkList() returneaza 0)
      if(this.checkList(list, optval) == 0) {
        // creaza elementul <option> si-l adauga in lista
        var myoption = document.createElement('option');
        myoption.value = opt_val;
        myoption.innerHTML = opt_val;
        document.getElementById(list).insertBefore(myoption, document.getElementById(list).firstChild);

        document.getElementById(optval).value = '';           // sterge valoarea din caseta de text
      }
      else alert('Optiunea "'+opt_val+'" e deja adaugata');
    }
    else alert('Adaugati o valoare pentru optiune');
  };

  // metoda pt. stergere <option>
  adOption.delOption = function(list, optval) {
    // preia valoarea pt. <option> care trebuie stearsa
    var opt_val = document.getElementById(optval).value;

    // verifica sa existe acea optiune (cand checkList() returneaza 1)
    if(this.checkList(list, optval) == 1) {
       // preia elementele <option> din lista <select>
      var opts = document.getElementById(list).getElementsByTagName('option');

      // parcurge array-ul cu elementele <option>, sterge optiunea cu valoarea transmisa in "optval"
      for(var i=0; i<opts.length; i++) {
        if(opts[i].value == opt_val) {
          document.getElementById(list).removeChild(opts[i]);
          break;
        }
      }
    }
    else alert('Optiunea cu valoare "'+opt_val+'" nu exista');
  }

  // metoda care adauga optiunea selectata in caseta de text
  adOption.selOpt = function(opt, txtbox) { document.getElementById(txtbox).value = opt; }
--></script>

- Metoda adOption.addOption('sel_list', 'optval') adauga in lista <select> (cu id="sel_list") valoarea din casuta text (cu id="optval").
- Metoda adOption.delOption('sel_list', 'optval') sterge din lista <select> (cu id="sel_list") optiunea cu valoarea din casuta text (cu id="optval").
- Metoda adOption.selOpt(this.value, 'optval') adauga in caseta de text (cu id="optval") valoarea optiunii selectate.

- Codul de mai sus afiseaza acest rezultat:
Lista Select:


Adauga o optiune:

 

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag adauga rand nou in paragraf?
<b> <br> <p>
Prima linie ...<br>
Alta linie...
Ce proprietate CSS seteaza spatiu dintre litere?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
Ce functie obtine accesul la un element HTML cu un anumit ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Clic pe instructiunea "echo" utilizata corect.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Adresa URL: http://CoursesWeb.net";
Care din urmatoarele expresii cu "paint" (a picta) se foloseste pentru forma Negativa?
will paint not paint have painted
She does not paint that landscape.
- Ea nu picteaza acel peisaj.
Care din urmatoarele expresii cu "cantar" (a canta) se foloseste pentru propozitie Negativa?
ir a cantar cantaba no cantar
Ella no canta esa canciĆ³n.
- Ea nu canta acel cantec.
Adauga si Sterge optiuni din lista Select

Last accessed pages

  1. Curs si Tutoriale JavaScript (69404)
  2. Trecut perfect continuu - Exercitii si teste incepatori (3261)
  3. Coduri pt culori (40793)
  4. Metode ale obiectului Array in JS (593)
  5. Functii cu Parametri object si array (821)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4316)
  2. Curs HTML gratuit Tutoriale HTML5 (3564)
  3. Curs si Tutoriale JavaScript (3086)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3044)
  5. Curs CSS Online Tutoriale CSS3 (2985)