Adauga si Sterge optiuni din lista Select

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: