presun zo selectu do selectu

neopagan · Napísal **neopagan**: 23.10.2009 17:00

Mam jednoduchy javascript na presun poloziek z jedneho selectu do druheho.

Nazorna ukazka je tu: http://inbazar.sk/test/js/index.php

funguje to v pohode, ale ked presuniem co i len jednu polozku, stratia sa farby /styly/ v polozkach vlavo.

vsimnite si ze teraz su tam tri rozne farby a po presunuti doprava farby zo vsetkych zmiznu.

Nie som tak dobry v javascripte, neviem co opravit, aby tam tie styly zostali.

Tu je samotny kod javascriptu:

Kód:

<script language="JavaScript" type="text/JavaScript">     function move(fbox, tbox) {     var arrFbox = new Array();     var arrTbox = new Array();     var arrLookup = new Array();     var i;     for (i = 0; i < tbox.options.length; i++) {     arrLookup[tbox.options[i].text] = tbox.options[i].value;     arrTbox[i] = tbox.options[i].text;     }     var fLength = 0;     var tLength = arrTbox.length;     for(i = 0; i < fbox.options.length; i++) {     arrLookup[fbox.options[i].text] = fbox.options[i].value;     if (fbox.options[i].selected && fbox.options[i].value != "") {     arrTbox[tLength] = fbox.options[i].text;     tLength++;     }     else {     arrFbox[fLength] = fbox.options[i].text;     fLength++;     }     }     arrFbox.sort();     arrTbox.sort();     fbox.length = 0;     tbox.length = 0;     var c;     for(c = 0; c < arrFbox.length; c++) {     var no = new Option();     no.value = arrLookup[arrFbox[c]];     no.text = arrFbox[c];     fbox[c] = no;     }     for(c = 0; c < arrTbox.length; c++) {     var no = new Option();     no.value = arrLookup[arrTbox[c]];     no.text = arrTbox[c];     tbox[c] = no;     }     }     function selectAll(box) {     for(var i=0; i<box.length; i++) {     box[i].selected = true;     }     }     //  End -->     </script>

a este HTML cast

Kód:

<form name="form1" method="post" enctype="multipart/form-data">    
                  
       <select name="FirstList" id="FirstList" style="width:250px;height:100px" multiple>
      <option value="1" style="color: blue">Kategoria 1</option>
        <option value="2" style="color: green">Kategoria 2</option>
        <option value="3" style="color: red">Kategoria 3</option>
        </select>
      </td>

      <td align="left" width="60"><input type="button" onclick="move(this.form.FirstList,this.form.SecondList)" value=">>" style="height:50"/><br /><input type="button" onclick="move(this.form.SecondList,this.form.FirstList)" value="<<" style="height:50" /></td>

      <td align="left">Post in categories<br /><select name="test[]" id="SecondList" style="width:250px;height:100px" multiple="multiple" >
   </select></td></tr>

      </tr></table></div>
        
        </form>

prosim o radu..dakujem

stenley · Napísal **stenley**: 23.10.2009 17:11

problem je v tom, ze pri presuvani si uchovavas/nastavujes len text a hodnotu value jednotlivych poloziek, ale na atribut style uz zabudas...

neopagan · Napísal autor témy **neopagan**: 23.10.2009 17:23

hm, no ano, ale da sa to nejak zmenit aby to fungovalo aj so stylmi?

Napr. skusil som vsade doplnit fbox.options[i].text.style ale tak to nejde

pilná lama glama · Napísal **pilná lama glama**: 23.10.2009 17:31

skusil si?
fbox.options[i].style.color

neopagan · Napísal autor témy **neopagan**: 23.10.2009 17:41

skusil som teraz aj to. ale nefunguje to.. Neviem presne kde mam dat to .style.color

pretoze v tom javascripte sa vyskytuje aj tbox.options[i].value, aj tbox.options[i].text

Ďuri · Napísal **Ďuri**: 23.10.2009 18:42

Pouzil by som standardne metody DOMu - skopirujes option pomocou cloneNode, umiestnis ho pomocou appendChild / insertBefore a zmazes povodny option pomocou removeChild. Takto spolahlivo presunies vsetky atributy daneho uzlu.

neopagan · Napísal autor témy **neopagan**: 23.10.2009 19:13

Duri, ja viem ze si odbornik, ale na mna je to moc .. ja sa v tejto oblasti moc nevyznam

:roll:

zostal by som pri tom mojom sposobe, lebo to pekne funguje, len kde dat tie styly aby zostali zachovane...pls

RealShadow · Napísal **RealShadow**: 23.10.2009 21:16

Tak teda pouzijeme tvoj sposob

Na zaciatok si pridame dve nove premenne

var addColor = new Array(), keepColor = new Array();

"addColor" nam posluzi na to aby sme vedeli, ktoru farbu presuvame dalej a "keepColor" nam udrzi farby, ktore nam ostali v prvom boxe.

Kód:

function move(fbox, tbox) {    
      var arrFbox = new Array();     
      var arrTbox = new Array();     
      var arrLookup = new Array();
      var addColor = new Array(), keepColor = new Array();     
      var i;   
       
     for (i = 0; i < tbox.options.length; i++) {     
         arrLookup[tbox.options[i].text] = tbox.options[i].value;
         arrTbox[i] = tbox.options[i].text;
         // tuto farbu presuvame
         addColor[i] = tbox.options[i].style.color;
      }    
      
      var fLength = 0;     
      var tLength = arrTbox.length; 
          
      for(i = 0; i < fbox.options.length; i++) {  
         arrLookup[fbox.options[i].text] = fbox.options[i].value;
         // zapiseme si vsetky farby a ich poradie
         keepColor[i] = fbox.options[i].style.color;   
         if (fbox.options[i].selected && fbox.options[i].value != "") {     
             arrTbox[tLength] = fbox.options[i].text;
            // tuto farbu presuvame
            addColor[tLength] = fbox.options[i].style.color;
            // a zaroven ju dame prec lebo nam ostali zvysne dve
            keepColor.splice(keepColor.indexOf(i), 1);
            tLength++;     
         } else {     
            arrFbox[fLength] = fbox.options[i].text;
            fLength++;     
         }     
      }
           
      arrFbox.sort();     
      arrTbox.sort();
      // sort
      keepColor.sort();
      addColor.sort(); 
           
      fbox.length = 0;    
      tbox.length = 0;    
      
      var c;     
      for(c = 0; c < arrFbox.length; c++) {    
         var no = new Option();     
         no.value = arrLookup[arrFbox[c]];     
         no.text = arrFbox[c];
         // tieto farby na ostali
         no.style.color = keepColor[c];
         fbox[c] = no;     
      }    
      for(c = 0; c < arrTbox.length; c++) {   
         var no = new Option();     
         no.value = arrLookup[arrTbox[c]];     
         no.text = arrTbox[c];
         // tuto farbu sme presunuli
         no.style.color = addColor[c];     
         tbox[c] = no;     
      }     
   }     

Takze u mna to fici jedna radost, tak by to mali ist aj tebe. :roll:

neopagan · Napísal autor témy **neopagan**: 24.10.2009 3:17

excelentne!!!

diky moc

neopagan · Napísal autor témy **neopagan**: 30.10.2009 16:31

musim sa k tejto teme vratit... tie farby su v pohode, funguje to super.

Zistil som vsak jeden nedostatok, a to, ze nespravne priraduje value presunutym polozkam vtedy, ak maju rovnake mena.

Uvediem priklad:

Kód:

<select name="FirstList" id="FirstList"  multiple>
      <option value="x" style="color: blue">Kategoria 1</option>
        <option value="1" >automobily</option>
        <option value="2">motocykle</option>
<option value="x" style="color: blue">Kategoria 2</option>
        <option value="3" >automobily</option>
        <option value="4">bicykle</option>

        </select> 

Ked teda zvolim v lavom selecte napr. automobily /value 1/, presunie sa doprava sice nazov automobily, ale ma value 3 - to znaci to druhe value.

Dalo by sa niekde v tom kode upravit, aby aj v pripade rovnakych nazvov presunul aj spravne value?

dakujem

Prikladam cely kod vo verzii, ktoru pouzivam:

Kód:

function move(fbox, tbox) {   
      var arrFbox = new Array();     
      var arrTbox = new Array();     
      var arrLookup = new Array();
      var addColor = new Array(), keepColor = new Array();     
      var i;   
      
     for (i = 0; i < tbox.options.length; i++) {     
         arrLookup[tbox.options[i].text] = tbox.options[i].value;
         arrTbox[i] = tbox.options[i].text;
         // tuto farbu presuvame
       //  addColor[i] = tbox.options[i].style.color;
      }   
      
      var fLength = 0;     
      var tLength = arrTbox.length;
         
      for(i = 0; i < fbox.options.length; i++) { 
         arrLookup[fbox.options[i].text] = fbox.options[i].value;
         // zapiseme si vsetky farby a ich poradie
         keepColor[i] = fbox.options[i].style.color;   
         
         if (fbox.options[i].selected && fbox.options[i].value == "x") {alert('Musíte zvoliť konkrétnu podkategóriu');return }
            
         if (fbox.options[i].selected && fbox.options[i].value != "") {     
             arrTbox[tLength] = fbox.options[i].text;
            // tuto farbu presuvame
            addColor[tLength] = fbox.options[i].style.color;
            // a zaroven ju dame prec lebo nam ostali zvysne dve
            keepColor[fLength] = fbox.options[i].style.color;
            
            if (arrTbox.length>3) {alert('Môžete pridať maximálne 3 kategórie!'); return}   
            tLength++;     
         } else {     
            arrFbox[fLength] = fbox.options[i].text;
            keepColor[fLength] = fbox.options[i].style.color;   
            fLength++;     
         }     
      }
           
    //  arrFbox.sort();     
    //  arrTbox.sort();
    
    //  keepColor.sort();
    //  addColor.sort();
           
      fbox.length = 0;   
      tbox.length = 0;   
      
      var c;     
      for(c = 0; c < arrFbox.length; c++) {   
         var no = new Option();     
         no.value = arrLookup[arrFbox[c]];   
         no.text = arrFbox[c];
         // tieto farby na ostali
         no.style.color = keepColor[c];
         fbox[c] = no;     
      }   
      for(c = 0; c < arrTbox.length; c++) {   
         var no = new Option();     
         no.value = arrLookup[arrTbox[c]];     
         no.text = arrTbox[c];
         // tuto farbu sme presunuli
         no.style.color = addColor[c];     
         tbox[c] = no;     
      }     
   }      
     function selectAll(box) {     for(var i=0; i<box.length; i++) {     box[i].selected = true;     }     } 

tomast7 · Napísal **tomast7**: 30.10.2009 17:51

nepozeral som si cely kod, ale myslim ze nie je vhodne aby si mal v jednom selecte dve options s rovnakym menom navyse s rozdielnymi hodnotami.

Naozaj si to nechces rozmysliet a pouzit standardne funkcie na pracu so selectom? Nie je to az tak tazke

Ja pouzivam na prenos so selectu do selectu tuto funkciu

select_two.options.add(select_one.options[0]);

tymto jednym riadkom sa mi odstrani options z prveho selectu a zaroven prida do druheho. Index 0 znamena ze sa prenesie prva option v poradi. A prenesie mi to aj styl.

//edit: prave zistujem ze moje riesenie s funkciou add nefunguje v IE. takze nic:)

neopagan · Napísal autor témy **neopagan**: 31.10.2009 11:28

hm, problem je, ze kategorie si v admine urcuje zakaznik, a ja ich vytahujem z dtb do prveho selectu. V niektorych kategoriach su podkategorie, ktore su rovnake s inymi podkategoriami v inych kategoriach. Proste zakaznik to tak chce.

Napr. je kategoria VYVOJ SOFTWARU - podkategorie
Aplikacie, databazy, ostatne

a potom kategoria ADMINISTRACIA SYSTEMOV - bezpecnost, databazy, ostatne

atd...

proste chcem aby to fungovalo aj s rovnakymi nazvami... vsetko pekne funguje, jediny problem je ked su rovnake nazvy, nepriradi spravne value.

Prosim vas o pomoc, nejak ten kod poupravit,dost mi to suri.

Mockrat diky!

tomast7 · Napísal **tomast7**: 31.10.2009 12:07

skus tie option identifikovat podla id. napriklad

<option id="vyvoj_softwaru_ostatne">Ostatne</option>
<option id="administracia_systemov_ostatne">Ostatne</option>

neopagan · Napísal autor témy **neopagan**: 31.10.2009 12:31

to neni zly napad, priradit ku kazdemu optionu ID s nazvom hlavnej kategorie. Avsak ako to potom spracujem po presunuti do druheho selectu?

Aby teda priradilo spravne value---

//EDIT: tak zatial som to vyriesil tak, ze do selectu vypisujem nazvy podkategorii spolu s hlavnou kategoriou. Teda napr.

Vyvoj softwaru->databazy
Vyvoj softwaru->ostatne
Administracia->ostatne

Tym padom nazvy nie su rovnake a takto to funguje spravne.

Ale ak by ste to vedeli vyriesit inak, uvitam kazdu radu. diky

presun zo selectu do selectu

Podobné témy