ukrywanie elementów listy rozwijanej w zależności od wybranego elementu w innej liście rozwijanej ( Javascript)

pytanie zadane 10 listopada 2018 w JavaScript przez Kamil Szpecht Początkujący (280 p.)
edycja 11 listopada 2018 przez Kamil Szpecht

Witam .

Problem jak w tytule, mam dwie listy rozwijane nazwijmy je "lista1" i "lista2" ilość elementów dostępnych w liście drugiej jest zależna od wybranego elementu w liście pierwszej..

Teraz najważniejsze. Jestem początkujący i zależy mi by to załatwić w czystym JS (póki nie poznam go dobrze nie chce sobie mieszać w głowie framework'ami)

Jak szukałem po zagranicznych forach to rozwiązania były ale zazwyczaj z wykorzystaniem framework'a jakiegoś :) .

pomijając reszte chodzi o dwie listy typu "select"

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
                        <select>
                                        <option class="profilowanie" value="1" >Profilowanie wąskie woodgrain</option>
                                        <option class="profilowanie" value="2">Profilowanie szerokie woodgrain</option>
                                        <option class="profilowanie" value="3">Bez profilowań gładki</option>
                                        <option class="profilowanie" value="4">Mikroprofil</option>
                                        <option class="profilowanie" value="5">Kaseton woodgrain</option>
                                        <option class="profilowanie" value="6">Profilowanie wąskie gładkie</option>
                                        <option class="profilowanie" value="7">Profilowanie szerokie gładkie</option>
                        </select><br>

                        <select>
                            <option class="colorStandard" value="1">Wybierz kolor</option>
                            <option class="colorStandard" value="2">Biały 9010</option>
                            <option class="colorStandard" value="3">Złoty Dąb </option>
                            <option class="colorStandard" value="4">Orzech</option>
                            <option class="colorStandard" value="5">Kingchester</option>
                            <option class="colorStandard" value="6">Anracyt 7016</option>
                            <option class="colorStandard" value="7">Deep Mat RAL 7016</option>
                        </select><br>
</body>
</html>

komentarz 11 listopada 2018 przez ScriptyChris Mędrzec (190,190 p.)

W jakiej formie są te listy rozwijane - elementy <select>, czy coś bardziej customowego? Pokaż kod.

komentarz 11 listopada 2018 przez Kamil Szpecht Początkujący (280 p.)

zrobione

komentarz 11 listopada 2018 przez ScriptyChris Mędrzec (190,190 p.)

Podepnij się do pierwszego <select> na zdarzenie change. Indeks zaznaczonego <option> wyciągniesz z property selectedIndex zawartym w targecie obiektu zdarzenia.

komentarz 11 listopada 2018 przez Kamil Szpecht Początkujący (280 p.)

możesz mi obiaśnic opisowo co tu sie dzieje ?

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('select[name="ice-cream"]').onchange=changeEventHandler;
},false);

komentarz 11 listopada 2018 przez ScriptyChris Mędrzec (190,190 p.)

W momencie gdy document HTML zostanie załadowany i sparsowany (nie licząc zewnętrznych styli, obrazków, skryptów, iframe'ów - o tym informuje event load) uruchamiana jest funkcja, która pobiera z DOM element <select> z atrybutem name="ice-cream" i pod jego metodę onchange przypisywana jest funkcja changeEventHandler. Ta zostanie wywołana gdy zajdzie zdarzenie change.

1 odpowiedź

odpowiedź 14 listopada 2018 przez ondrii Początkujący (460 p.)
wybrane 14 listopada 2018 przez Kamil Szpecht

Najlepsza


<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded',function() {
            var colorsSelect = document.getElementById("colors");
            var profilesSelect = document.getElementById("profiles");
            var colorOptions = {
                1: "Wybierz kolor",
                2: "Biały 9010",
                3: "Złoty Dąb",
                4: "Orzech",
                5: "Kingchester",
                6: "Anracyt 7016",
                7: "Deep Mat RAL 7016"
            };
            var colorSelectMapping = {
                1: [1, 2, 3],
                2: [1, 2, 3, 4],
                3: [1, 4, 5],
                4: [1, 2, 7],
                5: [1, 2, 6],
                6: [1, 3, 4, 5, 6],
                7: [1, 2, 3, 4]
            };
            var colorUpdateList = function (profileNumber) {
                while (colorsSelect.options.length) {
                    colorsSelect.remove(0);
                };

                var options = filterColorOptions(profileNumber);

                for (var option in options) {
                    var elem = document.createElement("option");
                    elem.text = colorOptions[option];
                    elem.className = "colorStandard";
                    colorsSelect.options.add(elem, option);
                };
            };
            var filterColorOptions = function (profileNumber) {
                var results = {};
                var optionNumbers = colorSelectMapping[profileNumber];
                optionNumbers.forEach(function (number) {
                    results[number] = colorOptions[number];
                });
                return results;
            };
            var profilowanieChangeEvent = function (event) {
                var selectedIndex = event.target.selectedIndex;
                var selectedOption = event.target.options[selectedIndex].value;

                colorUpdateList(selectedOption);
            };

            profilesSelect.onchange = profilowanieChangeEvent;

            colorUpdateList(1);
        },false);
    </script>
</head>

<body>
    <select id="profiles">
        <option class="profilowanie" value="1" >Profilowanie wąskie woodgrain</option>
        <option class="profilowanie" value="2">Profilowanie szerokie woodgrain</option>
        <option class="profilowanie" value="3">Bez profilowań gładki</option>
        <option class="profilowanie" value="4">Mikroprofil</option>
        <option class="profilowanie" value="5">Kaseton woodgrain</option>
        <option class="profilowanie" value="6">Profilowanie wąskie gładkie</option>
        <option class="profilowanie" value="7">Profilowanie szerokie gładkie</option>
    </select><br>

    <select id="colors">
        <option class="colorStandard" value="1">Wybierz kolor</option>
    </select><br>
</body>
</html>

Rzuć okiem na to.
Oczywiście wartości, które będą w drugim select'ie są przykładowe, ustaw po swojemu zależności pomiędzy 1 selectem a drugim.