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 atribut specifica adresa unde sunt trimise datele din formular?
method action name
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS desparte cuvinte lungi, adaugand pe rand nou?
word-wrap line-height font-size
#id {
  width: 100px;
  word-wrap: break-word;
}
Ce functie aranjeaza elementele din array in ordine alfabetica, bazat pe valorile lor?
pop() sort() shift()
var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css
Indicati functia care returneaza valoarea ultimului element din array.
current() next() end()
$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript
Alegeti verbul auxiliar corect care trebuie in propozitia: "Her plane ... just arrived".
have has does
Her plane has just arrived.
- Avionul ei tocmai a sosit.
Indicati forma corecta a verbului SER (a fi) in propozitia: "Vosotros ... muy simpáticos".
son soy sois
Vosotros sois muy simpáticos.
- Sunteti foarte simpatici.
Adauga si Sterge optiuni din lista Select

Last accessed pages

  1. Proverbe, expresii si zicatori (24832)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (278051)
  3. Curs HTML gratuit Tutoriale HTML5 (197724)
  4. Titluri, Paragrafe, Un nou rand, Linie orizontala (33370)
  5. Elemente principale HTML (29071)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (166)
  2. Curs HTML gratuit Tutoriale HTML5 (139)
  3. Coduri pt culori (96)
  4. Creare si editare pagini HTML (91)
  5. Gramatica limbii engleze - Prezentare Generala (81)