Jak połączyć dynamicznie dwie listy rozwijane?

Skrypciarze odpowiadają na Wasze pytania

Jak połączyć dynamicznie dwie listy rozwijane?

Cześć, Skrypciarze! Jak skonfigurować dwie listy rozwijane w programie HTA, które będą działać tak, że zmiana wybranej pozycji na jednej z nich powoduje analogiczną zmianę w drugiej?

--TC

Cześć, PC! Zanim zacznę, to kilka słów usprawiedliwienia z mojej strony. Albo może i jedno słowo wystarczy: ZASPAŁEM! Nie będę teraz wymyślał pięknych historii, jak to pracowałem do późna, zasnąłem przy komputerze z głową na klawiaturze (i do tej pory mam na czole odbite klawisze) lub że byłem na Simpsonach (i dla potwierdzenia tej wymówki opowiedziałbym, lub raczej przepisał recenzję). Nic z tych rzeczy, czytelników nie okłamuję, po prostu, po ludzku zaspałem... zaraz sprawdzę, czy wszystko mam na prawej stronie, bo ubieranie się w biegu jest dość zawodne...Ok, wszystko na prawej, zabieram się zatem do skryptu.

Więc po kolei, muszę sobie to sam jakoś wytłumaczyć. Tak, zatem mamy aplikację HTML, znaną wszystkim jako HTA, w której wyskakują nam czasem listy rozwijane. Tak. Tak właśnie chyba jest (proces myślenia osoby zaspanej jest bardzo spowolniony, niestety). Chcemy teraz, aby po wybraniu jednej opcji z listy, opcje na drugiej zmieniały się dynamicznie odpowiednio do pierwszego wyboru. Jak to zrobić? Oto skrypt na dobry początek dnia:

<Script Language="VBScript">

    Sub RunScript

        For Each objOption in DynamicOptions.Options

            objOption.RemoveNode

        Next 



        If PickCategory.Value = "Characters" Then

            arrValues = Array("A", "B", "C", "D", "E")

        End If



        If PickCategory.Value = "Numbers" Then

            arrValues = Array("1", "2", "3", "4", "5")

        End If



        For Each strValue in arrValues

            Set objOption = Document.createElement("OPTION")

            objOption.Text = strValue

            objOption.Value = strValue  

            DynamicOptions.Add(objOption)

        Next     

    End Sub

</Script>



<select size="1" name="PickCategory" style="width:100px" onChange="RunScript">

    <option value="Characters">Characters</option>

    <option value="Numbers">Numbers</option>

</select>



<P>



<select size="1" name="DynamicOptions" style="width:100px">

    <option value="A">A</option>

    <option value="B">B</option>

    <option value="C">C</option>

    <option value="D">D</option>

    <option value="E">E</option>

</select>

Jak widać, niniejsza aplikacja HTA nie należy do bardziej skomplikowanych (również o tej porze dnia). Jeżeli jednak chcecie sobie doczytać na ten temat, to jak zawsze zapraszamy do naszej fascynującej witryny – HTA Developers Center (j.ang.). Schemat naszej aplikacji składa się tylko z pary list rozwijanych. Pierwsza z nich, o nazwie PickCategory, zawiera tylko dwie opcje:

• Characters (opcja domyślna)
• Numbers

Użytkownik wybierze zapewne jedną z tych dwóch niesamowitych opcji. Jeśli wybierze opcję Characters, w drugiej liście rozwijanej (którą nazwaliśmy DynamicOptions) udostępnimy opcje mające postać liter. Jeżeli użytkownik wybierze opcję Numbers, udostępnimy w drugiej liście serię cyfr. Za każdym razem, gdy dokonamy zmiany wartości PickCategory, uruchamiamy podprogram o nazwie RunScript; stąd właśnie parametr onChange="RunScript":

<select size="1" name="PickCategory" style="width:100px" onChange="RunScript">

    <option value="Characters">Characters</option>

    <option value="Numbers">Numbers</option>

</select>

Druga lista rozwijana to, jak już wspomnieliśmy, DynamicOptions. Po otwarciu aplikacji HTA, domyślnie opcje listy mają postać liter (jeżeli nie jesteście ekspertami w tagowaniu HTML w celu utworzenia listy rozwijanej, to zapraszam do przejrzenia jednego z naszych samouczków z zakresu HTA (j.ang.)). Całość tagowania dla listy rozwijanej wygląda następująco:

<select size="1" name="DynamicOptions" style="width:100px">

    <option value="A">A</option>

    <option value="B">B</option>

    <option value="C">C</option>

    <option value="D">D</option>

    <option value="E">E</option>

</select>

Oczywiście opcje domyślne nie są niezmienne, zmieniają się za każdym razem, kiedy użytkownik dokona nowego wyboru w kategorii PickCategory w liście rozwijanej. Jak? Bez obaw, zaraz objaśnimy.

Zaraz, od czego tu zacząć? Może od podprogramu RunScipt, który uruchamia się za każdym razem, kiedy użytkownik dokona jakiegoś wyboru w PickCategory na naszej liście rozwijanej... Chyba od tego... nie wiem...już nigdy nie zasypiać do pracy, człowiek się nie może skoncentrować na niczym. O! Samolot! O! Konik! O! Piesek!(no dobra, te dwa ostatnie to jakbym był na wsi, ale po niewyspaniu wyobraźnia różnie działa...) itp., itd.

Powiecie pewnie „Skończ już ... i zacznij konkretnie!” Więc odpowiadam konkretnie na pytanie: „Jak działa podprogram RunScipt?”. Najpierw używamy poniższego wiersza kodu w celu usunięcia wszystkich opcji z listy rozwijanej DynamicOptions:

For Each objOption in DynamicOptions.Options

    objOption.RemoveNode

Next

Po co tyle zachodu? Bardzo proste: za każdym razem, gdy dokonujemy zmiany w pierwszej liście rozwijanej, chcemy zamienić zupełnie wszystkie opcje udostępniane w drugiej liście. Najprostszą metodą osiągnięcia tak szczytnego i trudnego celu jest usunięcie wszystkich możliwych opcji i dodanie zupełnie nowych.

Pierwszym krokiem będzie ustalenie wartości wybranej w pierwszej liście rozwijanej, potem rozpoczyna się proces przypisywania odpowiednich opcji drugiej liście rozwijanej (trzeba oczywiście umieścić wszystkie nasze wartości w tablicy o nazwie arrValues). Poniższy fragment kodu ustala, czy w pierwszej liście wybrano opcję Characters, a następnie przypisuje odpowiednie litery do arrValues:

If PickCategory.Value = "Characters" Then

    arrValues = Array("A", "B", "C", "D", "E")

End If

Oczywiście w liście mogła zostać wybrana opcja Numbers. Jeżeli tak właśnie się stało, to nie należy rozpaczać, poradzi z tym sobie następujący fragment kodu, który nadaje odpowiednie liczby naszej arrValues, jednak tylko, jeżeli w pierwszej liście została wybrana opcja Numbers:

If PickCategory.Value = "Numbers" Then

    arrValues = Array("1", "2", "3", "4", "5")

End If

Po przypisaniu odpowiednich wartości tablicy arrValues, używamy poniższego fragmentu kodu w celu utworzenia nowych opcji dla drugiej listy rozwijanej:

For Each strValue in arrValues

    Set objOption = Document.createElement("OPTION")

    objOption.Text = strValue

    objOption.Value = strValue  

    DynamicOptions.Add(objOption)

Next

Teraz już tylko uruchamiamy pętlę For Each, która przechodzi przez każdą wartość w tablicy arrValues. Dla każdego znajdującego się w niej elementu tworzymy wystąpienie obiektu Option, który reprezentuje poszczególne opcje w liście. Dla każdego wystąpienia obiektu Option przypisujemy dany obiekt, po czym elementom w tablicy nadajemy właściwości Text oraz Value:

objOption.Text = strValue

objOption.Value = strValue

Innymi słowy, jeżeli pierwszą wartością w tablicy jest A, tworzymy listę rozwijaną, która nie tylko oznaczona jest jako (Text) A, ale ma również tę samą wartość. Następnie korzystając z metody Add, dodajemy tą nową opcję do drugiej listy rozwijanej:

DynamicOptions.Add(objOption)

Ponownie uruchamiamy pętlę i powtarzamy proces, aż wszystkie element w tablicy arrValues zostaną skonfigurowane jako opcje drugiej listy rozwijanej.

To na tyle chyba, bo dość zapętliłem się w rozważaniach. Ale tak to jest, jak człowiek nie ma czasu nawet na porządny zimny prysznic z rana (tak, chcę być bohaterem odważnym w naszych artykułach i dla ich potrzeb biorę wyłącznie zimny prysznic).

Do początku strony