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 afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Adauga si Sterge optiuni din lista Select

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (31324)
  2. Gramatica limbii engleze - Prezentare Generala (92212)
  3. Viitor simplu si continuu - Future Tense Simple and Continuous (17656)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (31205)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (43432)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2257)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (871)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (718)
  4. Exercitii engleza - English Tests and exercises - Grammar (675)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (606)