[JS] Dwa multiple selecty Opcje

[Cudi]

Próbuje utowrzyć dwa selecty, tak żeby za pomocą przycisków mozna było przenosić optiony z jednego do drugiego. Napsałem sobie przykładowy formularz:
[xml:1:c089737d5b]<form name="TwoFrames">
<select name="Frame1" size="5" multiple="multiple">
<option value="1">element 1</option>
<option value="2">element 2</option>
<option value="3">element 3</option>
<option value="4">element 4</option>
</select>
<input type="button" value="<<<" onclick="MoveToLeft()" />
<input type="button" value=">>>" onclick="MoveToRight()" />
<select name="Frame2" size="5" multiple="multiple">
<option value="5">element 5</option>
<option value="6">element 6</option>
<option value="7">element 7</option>
<option value="8">element 8</option>
</select>
</form>[/xml:1:c089737d5b]
Po kliknięciu w przyciski zostanie wywołana odpowiednia funkcja MoveToLeft, lub MoveToRight. Oto kod:

Kod

<script language="JavaScript">

    var objFrame1 = document.TwoFrames.Frame1;

    var objFrame2 = document.TwoFrames.Frame2;



    function MoveToRight()

    {

        var len = objFrame1.length;



        for( i = 0; i < len; i++ )

        {

            if( objFrame1.options[i].selected == true )

            {

                objFrame2.options[ objFrame2.length ] = new Option( objFrame1.options[i].text );

                objFrame1.options[i] = null;

            }

        }

    }

    

    function MoveToLeft()

    {

        var len = objFrame2.length;



        for( i = 0; i < len; i++ )

        {

            if( objFrame2.options[i].selected == true )

            {

                objFrame1.options[ objFrame1.length ] = new Option( objFrame2.options[i].text );

                objFrame2.options[i] = null;

            }

        }

    }

</script>

Problem pojawia sie przy usuwaniu przeniesionych optionów, za co odpowiada ten kod:

Kod

objFrame2.options[i] = null;

Nie wiem dlaczego ale usuwa sie tylko co drugi option.
Tutaj można zobaczyć to w akcji:
:arrow: http://cudi.miracle.pl/form.html
Próbowałem usuwać w osobnej pętli, ale nic to nie dało. Będe bardzo wdzięczny jeśli ktoś wytłumaczy mi skąd sie wzioł ten błąd, i powie jak go naprawić. W JS stawiam pierwsze kroki

[hawk]

Błąd wziął się stąd:

Kod

var len = objFrame1.length;

Więc len zawiera liczbę opcji przed usunięciem zaznaczonych.

Kod

for (i = 0; i < len; i++ )

I tutaj jest błąd, ponieważ po usunięciu zaznaczonych opcji jest ich mniej niż było, a pętla idzie dalej, i w końcu i przekracza liczbę aktualnie obecnych opcji, i skrypt się wywala.

A problem z usuwaniem tylko co drugiej opcji polega na tym, że jak masz zaznaczone 2 opcje, to po usunięciu pierwszej skrypt nie "złapie" drugiej.
Dla przykładu, masz zaznaczone opcje nr 1 i 2 (w sumie są 4). Gdy i==1, skrypt usuwa opcję 1. Teraz opcja 2 ma nr 1, opcja 3 ma nr 2. Więc w następnej iteracji pętla sprawdzi nową opcję 2 (czyli ostatnią), nowa opcja 1 (oryginalnie 2) w ogóle nie zostanie sprawdzona.

Więc trzeba udziwnić skrypt:

Kod

function moveOptions(dst, src) {

  var i = 0;

  while (i < src.length) {

    if (src.options[i].selected == true) {

      dst.options[dst.length] = new Option(src.options[i].text, src.options[i].value);

      src.options[i] = null;

    } else {

      i++;

    }

  }

}

Przy okazji masz jedną funkcję, która przenosi w obie strony, i dodałem przepisywanie wartości opcji, a nie tylko tekstu.

[Cudi]

Wielkie dzięki hawk, teraz juz wszystko rozumiem. Nie wziołem pod uwage że przypisująć wartość null pozbede sie całego elementu tablicy, a wszystkie klucze przesuną sie o jeden. Chyba niedoceniłem JavaScriptu