A InfoWiki wikiből

A lap 2009. március 5., 10:00-kori változata

Dupla lista kezelése

Gyakorlati foglalkozások

CGI és Űrlap feldolgozás

Hernyák Zoltán

A form-ra helyezzünk fel két listát. Az egyikbe soroljunk fel lehetséges kedvenc állatok neveit (hörcsög, papagáj, cica, ...). A második lista induláskor üres.

Tegyük fel, hogy a felhasználó a kedvenc állatok listájáról akarja összeválogatni a saját kedvenceinek listáját. Ezért a két lista közé négy gombot kell tervezni:

• adott (kiválasztott) elem átrakása bal oldali listáról a jobb oldali listára
• adott (kiválasztott) elem átrakása jobb oldali listáról a bal oldali listára
• minden bal oldali elem átrakása a jobb oldalira
• minden jobb oldali elem átrakása a bal oldalira

Oldjuk ezt meg JavaScript-ben!

kiválasztott elem megkeresése

function getSelectedOption(lb1_id)
{
 var lb1 = document.getElementById(lb1_id);
 for(var i=0;i<lb1.length;i++)
   if (lb1.options[i].selected) return lb1.options[i];
 return null;
}

új elem hozzáadása

function addOption(lb2_id, selOpt)
{
 var lb2 = document.getElementById(lb2_id);
 var opt = document.CreateElement("option");
 opt.text = selOpt.text;
 opt.value = selopt.value;
 lb2.add(opt);
}

kiválasztott elem törlése

function removeSelectedOption(lb1_id)
{
 var lb1 = document.getElementById(lb1_id);
 for(var i=0;i<lb1.length;i++)
   if (lb1.options[i].selected) 
   {
       return lb1.remove(i);
       break;
   }
}