T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
18th April

Operacije nad seznami – Javascript DOM – HTML select – HTML option

Na blog sem že dodal nekaj uporabnih Javascript funkcij, ki jih dostikrat uporabljam. Sedaj pa si poglejmo Javascript funkcije, ki skrbijo za operacije nad seznami. Vzemimo dva seznama med katerima lahko poljubno izmenjavamo HTML option elemente (opcije). V našem primeru imamo seznam (HTML select element) vseh vprašanj ter dodaten seznam, kjer imamo le trenutno aktualne novice (ki jih dodajamo iz seznama vseh novic). Poglejmo si standardne operacije nad njima:

Dodaj opcijo v poljuben seznam:

JAVASCRIPT:
  1. function addOptionToSelect(selectID, value, text) {
  2.     var select = document.getElementById(selectID);
  3.     var option = document.createElement("option");
  4.     option.text = text;
  5.     option.value = value;
  6.  
  7.     //standards compliant; doesnt work in IE
  8.     try {
  9.         select.add(option, null);
  10.     } catch(ex) {
  11.         select.add(option);
  12.     }
  13. }

Odstrani opcijo iz poljubnega seznama:

JAVASCRIPT:
  1. function removeOptionFromSelect(selectID, value) {
  2.     var select = document.getElementById(selectID);
  3.     var index = getOptionValueIndex(selectID, value);
  4.  
  5.     if (index !== null) {
  6.         select.remove(index);
  7.     }
  8. }

Dobi index določene opcije v poljubnem seznamu:

JAVASCRIPT:
  1. function getOptionValueIndex(selectID, value) {
  2.     var select = document.getElementById(selectID);
  3.  
  4.     for (var intI = 0; intI <select.length; intI++) {
  5.         if (select.options[intI].value == value) {
  6.             return intI;
  7.         }
  8.     }
  9.  
  10.     return null;
  11. }

Dobi vrednost trenutno izbrane - označene opcije v poljubnem seznamu:

JAVASCRIPT:
  1. function getSelectedOptionValue(selectID) {
  2.     if (document.getElementById(selectID).selectedIndex>= 0) {
  3.         return document.getElementById(selectID).options[document.getElementById(selectID).selectedIndex].value;
  4.     }
  5.  
  6.     return null;
  7. }

Dobi naziv - tekst trenutno izbrane - označene opcije v poljubnem seznamu:

JAVASCRIPT:
  1. function getSelectedOptionText(selectID) {
  2.     if (document.getElementById(selectID).selectedIndex>= 0) {
  3.         return document.getElementById(selectID).options[document.getElementById(selectID).selectedIndex].text;
  4.     }
  5.  
  6.     return null;
  7. }

Premakni trenutno izbrano - označeno opcijo (gor - dol) v poljubnem seznamu:

JAVASCRIPT:
  1. function moveOption(selectID, operation) {
  2.     var select = document.getElementById(selectID);
  3.     var selectedValue = getSelectedOptionValue(selectID);
  4.     var currentIndex = getOptionValueIndex(selectID, selectedValue);
  5.     var newIndex = (operation == 'up' ? (currentIndex-1) : (currentIndex+1));
  6.  
  7.     if (currentIndex !== null) {
  8.         if ( (operation == 'up' && currentIndex == 0) || (operation == 'down' && (currentIndex <0 || currentIndex == (select.length-1))) ){
  9.             return false;
  10.         }
  11.  
  12.         //Z
  13.         var tempValue = select.options[newIndex].value;
  14.         var tempText = select.options[newIndex].text;
  15.  
  16.         //X
  17.         select.options[newIndex].value = select.options[currentIndex].value;
  18.         select.options[newIndex].text = select.options[currentIndex].text;
  19.  
  20.         //Y
  21.         select.options[currentIndex].value = tempValue;
  22.         select.options[currentIndex].text = tempText;
  23.  
  24.         select.selectedIndex = newIndex;
  25.  
  26.         return true;
  27.     }
  28. }

Označi vse opcije kot izbrane - označene v poljubnem seznamu:

JAVASCRIPT:
  1. function postAllSelectOptions(selectID) {
  2.     var select = document.getElementById('selectID');
  3.     select.multiple = 'multiple';
  4.  
  5.     for (var intI = 0; intI <select.options.length; intI++) {
  6.         select.options[intI].selected = true;
  7.     }
  8.  
  9.     return;
  10. }

Opomba: Ko naredimo POST imamo vse vrednosti, ki so trenutno v seznamu, ki hrani le aktualne informacije in ne le pred-postom izbrane - označene opcije.

Z zgoraj omenjenimi funkcijami je moč dodajati, odstranjevati ter premikati opcije med poljubnimi seznami. Je kot nekakšna majhna knjižnica, ki poskrbi za osnovne operacije nad seznami, ki deluje v vseh standardnih brskalnikih. Preizkusite zgoraj omenjene funkcije na konkretnem primeru.

Dodatne informacije:

Če imate tudi vi kakšno uporabno funkcijo v povezavi s seznami ali pa boljšo implementacijo ene izmed zgoraj omenjenih funkcij (ali vseh :P ) vas naproščam, da to dodate pod komentarje.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Javascript – delci uporabne kode
  2. AJAX iskanje in dodajanje v seznam (select) z dodatnimi informacijami
  3. Select – dropdown – width – internet explorer
  4. PHP funkcije v Javascript jeziku – isset
  5. Javascript – input text – le številke – validacija
  6. Textarea defaultValute – Javascript string replace – uidatepicker onClose
  7. Javascript – alert – confirm – prompt
  8. Internet explorer 8 – podpora HTML & DOM standardom
  9. Tablesorter – jQuery plugin Tablesorter 2.0 – šumniki – nepravilno sortiranje šumnikov čšž – javascript sortiranje tabel
  10. Input background-color – spreminjanje z Javascript-om

4x komentirano na “Operacije nad seznami – Javascript DOM – HTML select – HTML option”

  1. Boštjan je napisal:

    Pismo, pa ti objavljaš skor identične stvari ka sm jih jst že enkrat sam sprogrameru :D

  2. Roky je napisal:

    Hehe, možno da imava podoben stil:)

  3. smottt je napisal:

    Saj bistvene razlike tako ali tako ne more bit :P drugače pa zelo uporabne zadeve! Bo prav prišlo, malo za javascript študirat polet..

  4. Hacepsut je napisal:

    Pomoč,
    Na naslovu npr http://10.1.31.195/usr/stat2.txt ,bi moral datoteko stat2.txt brisat,pregledovat in po poterbi na novo kreirat ali uplodat. Do sedaj mi je usplelo da sem se pretolkel do tega da lahko preberem vsebino. Kako bi se dalo napravit še ostalo ali pa vsaj da bi izbrisal vsebino datoteke stat2.txt. Kodo je zelo podobna zgoraj navedni.

    Hvala

Dodaj komentar