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 este element de tip bloc?
<div> <img> <span>
<div>Web Programming and Development</div>
Care cod CSS afiseaza textul subliniat?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".
has't played haven't been playing will haven't played
The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.
Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".
habrá contado va a contar contaba
Él no habrá contado el cuento.
- El nu ar fi spus povestea.
Adauga si Sterge optiuni din lista Select

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (276334)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (124039)
  3. Limba spaniola curs online incepatori si avansati (30809)
  4. Titluri, Paragrafe, Un nou rand, Linie orizontala (33047)
  5. Introducere in HTML (25627)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1247)
  2. Coduri pt culori (885)
  3. Curs HTML gratuit Tutoriale HTML5 (737)
  4. Cursuri limba engleza gratuite si lectii online (398)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (376)