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

5x 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

  5. uskolachmann je napisal:

    There are many components that make a method statement. A trendy and delightful hand bag also makes a mode statement. Baggage sale has luggage, hand baggage, wallets, belts as well as other extras in various styles, sizes and colours. A baggage sale has luggage produced by various popular and perfectly identified providers like Louis Vuitton, Prada, Gucci, HUGO Manager and many others. All the luggage within a luggage sale are created up of pure leather and they are of a excellent and higher top quality. The luggage sale has affordable baggage as there is certainly a discount readily available over the bags in numerous moments of the 12 months, predominantly while in the festive time similar to the Xmas eve as well as new yr eve. Cheap baggage in numerous shades, sizes and styles are located inside a bags sale Piaget Polo réplique . Related Posts Manner Handbags, Discount Purses Leather Handbags available for purchase at Very low Price tag Store Like a Parisian Each individual woman wants an attractive, modern and low cost purse which is a designer piece, attractive and stylish for different occasions like get-togethers, conferences and informal or formal occasions. All women consider to have a trendy and delightful low cost bag that can match with their outfit. Luggage sale have each of the most up-to-date and fashionable low-cost designer purses that ladies like. Highest customers into a luggage sale are ladies, so a broad vary of girls hand baggage are exhibited within a luggage sale. There exists no will need for just a man or woman to go to a shop to acquire a good looking low cost bag, luggage sale is obtainable on-line where by one can decide on form a wide selection of hand bags in various shades, sizes and styles with different costs. The image of your different hand luggage in baggage sale can be obtained on the web, so its straightforward for 1 to settle on their favourite hand bag, location an buy and be the very pleased owner of the attractive designer hand bag. Wallets and luggage in several colours, sizes and styles for men are accessible in bags sale réplique de montres suisses . The luggage sale has other things such as shoes, belts and also other accessories.
    Differing kinds of luggage like ski luggage, sleeping bags, infant baggage, hand bags, shoulder luggage, wallets, purses, belts and many others are uncovered inside of a baggage sale. The hand baggage in a baggage sale are not only modern and beautiful and also are rough and past for a long period. Purses within a bags sale can be found in distinctive shades, so 1 can find the hand bag that may match with their outfit réplique suisse de montre . The cheap luggage in bags sale are made by competent craftsmen. Not only famed personalities can have stylish handbags but anyone can have a stylish and low-cost designer handbag that may be acquired from a bags sale Audemars Piguet réplique . A single should purchase cheap luggage inside a baggage sale which can be attractive and classy Piaget Polo réplique . 1 can buy a great present for just a beloved 1 from the baggage sale. Luggage bought from a bags sale may be applied as company or corporate items for marketing uses. .

    Related Articles:

Dodaj komentar