Lista select

Pentru crearea unei liste se folosește elementul- html select. În plus, cu ajutorul său se pot crea atât liste derulante, cât și liste obișnuite cu selecție simplă sau multiplă. De exemplu, o listă standard:

<select name="language" size="4">
   <option value="JS" selected="selected">JavaScript</option>
   <option value="Java">Java</option>
   <option value="C#">C#</option>
   <option value="C++">C++</option>
</select>

Atributul size permite stabilirea a câte elemente vor fi afișate simultan în listă. Valoarea size="1" afișează doar un element al listei, iar lista însăși devine derulantă. Dacă la elementul select se setează atributul multiple, atunci în listă se pot selecta simultan mai multe valori.

Fiecare element al listei este reprezentat de elementul- html option, care are o etichetă afișată și valori sub formă de atribut value.

În JavaScript, elementului select îi corespunde obiectul HTMLSelectElement, iar elementului option - obiectul HtmlOptionElement sau pur și simplu Option

Toate elementele listei în JavaScript sunt accesibile prin colecția options. Și fiecare obiect HtmlOptionElement are proprietățile: index (index în colecția options), text (textul afișat) și value (valoarea elementului). De exemplu, să obținem primul element al listei și să afișăm despre el toate informațiile prin proprietățile sale:

<form name="myForm">
   <select name="language" size="4">
       <option value="JS" selected="selected">JavaScript</option>
       <option value="Java">Java</option>
       <option value="CS">C#</option>
       <option value="CPP">C++</option>
   </select>
</form>
<script>
const firstLanguage = document.myForm.language.options[0];
console.log("Index:", firstLanguage.index);
console.log("Text:", firstLanguage.text);
console.log("Value:", firstLanguage.value);
</script>

Altă metodă de a obține elementul necesar al listei după index este folosirea metodei item(), în care se transmite indexul elementului:

const firstLanguage = myForm.language.item(0);
console.log("Index:", firstLanguage.index);
console.log("Text:", firstLanguage.text);
console.log("Value:", firstLanguage.value);

Control dinamic asupra listei

În JavaScript, nu doar că putem obține elemente, dar putem și să controlăm dinamic lista. De exemplu, să aplicăm adăugarea și ștergerea obiectelor din listă:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
</head>
<body>
<form name="myForm">
   <select name="language" size="5">
       <option value="JS" selected="selected">JavaScript</option>
       <option value="Java">Java</option>
       <option value="CS">C#</option>
       <option value="CPP">C++</option>
   </select>
   <p><input type="text" name="textInput" placeholder="Introduceți textul" /></p>
   <p><input type="text" name="valueInput" placeholder="Introduceți valoarea" /></p>
   <p>
       <input type="button" name="addButton" value="Adaugă" />
       <input type="button" name="removeButton" value="Șterge" />
   </p>
</form>

<script>
const myForm = document.myForm;
const addButton = myForm.addButton,
   removeButton = myForm.removeButton,
   languagesSelect = myForm.language;
// handler pentru adăugarea unui element
function addOption(){
   // obținem textul pentru element
   const text = myForm.textInput.value;
   // obținem valoarea pentru element
   const value = myForm.valueInput.value;
   // creăm un nou element
   const newOption = new Option(text, value);
   languagesSelect.options[languagesSelect.options.length] = newOption;
}
// handler pentru ștergerea unui element
function removeOption(){
   
   const selectedIndex = languagesSelect.options.selectedIndex;
   // ștergem elementul
   languagesSelect.options[selectedIndex] = null;
}

addButton.addEventListener("click", addOption);
removeButton.addEventListener("click", removeOption);
</script>
</body>
</html>

Pentru adăugarea în formular sunt destinate două câmpuri text (pentru eticheta text și valoarea elementului option) și un buton. Pentru ștergerea elementului selectat este destinat un alt buton.

Pentru adăugare, în codul JavaScript, funcția addOption este responsabilă, în care obținem valorile introduse în câmpurile text, creăm un nou obiect Option și îl adăugăm în array-ul options al obiectului listei.

Pentru ștergere, funcția removeOption este responsabilă, în care pur și simplu obținem indexul elementului selectat folosind proprietatea selectedIndex și în colecția options atribuim valoarea null la acest index.

Pentru adăugarea/ștergerea se pot folosi, de asemenea, ca alternativă, metodele elementului select:

// în loc de apelarea
// languagesSelect.options[languagesSelect.options.length] = newOption;
// folosiți pentru adăugare apelul metodei add
languagesSelect.add(newOption);
// în loc de apelarea
// languagesSelect.options[selectedIndex] = null;
// folosiți pentru ștergere metoda remove
languagesSelect.remove(selectedIndex);

Evenimente ale elementului select. Procesarea selecției în listă

Elementul select suportă trei evenimente: blur (pierderea focusului), focus (obținerea focusului) și change (schimbarea elementului selectat în listă). Să examinăm aplicarea evenimentului select:

<form name="myForm">
   <select name="language" size="5">
       <option value="JS" selected="selected">JavaScript</option>
       <option value="Java">Java</option>
       <option value="CS">C#</option>
       <option value="CPP">C++</option>
   </select>
</form>
<div id="selection"></div>
<script>
const languagesSelect = document.myForm.language;
const selection = document.getElementById("selection");

function changeOption(){
   const selectedOption = languagesSelect.options[languagesSelect.selectedIndex];
   selection.textContent = "Ați ales: " + selectedOption.text;
}

languagesSelect.addEventListener("change", changeOption);
</script>

Listă cu selecție multiplă

Dacă elementului <select> i se stabilește atributul multiple, atunci lista permite selectarea mai multor elemente. În acest caz, pentru a obține toate elementele selectate, trebuie folosită proprietatea selectedOptions, care reprezintă un obiect de tip HTMLCollection și conține lista elementelor selectate. Fiecare obiect din această listă are tipul HTMLOptionElement. Astfel, pentru a obține fiecare dintre elementele selectate, trebuie să iterăm această colecție:

<form name="myForm">
   <select name="languages" multiple>
       <option value="JS">JavaScript</option>
       <option value="Java">Java</option>
       <option value="CS">C#</option>
       <option value="CPP">C++</option>
   </select>
</form>
<div id="selection"></div>
<script>
const languages = document.myForm.languages;
const selection = document.getElementById("selection");

function changeOption(){
   // eliminăm elementele selectate anterior
   while (selection.firstChild) {
       selection.removeChild(selection.firstChild);
   }
   // obținem elementele selectate
   const options = languages.selectedOptions;
   for (let i = 0; i < options.length; i++) {    // pentru fiecare opțiune ...    
       const option = options[i].text;    // obținem elementul selectat
       const div = document.createElement("div");  // pentru fiecare element selectat creăm un div
       const optionText = document.createTextNode(option); // creăm un nod text pentru elementul selectat
       div.appendChild(optionText);    // adăugăm optionText în div
       selection.appendChild(div);     // adăugăm div în container
   }
}
languages.addEventListener("change", changeOption);
</script>

În acest caz, în handlerul evenimentului change, trecem prin fiecare element selectat și pentru fiecare element creăm un nod text, pe care îl plasăm într-un element div, care, la rândul său, este plasat în elementul selection pe pagina web.