Dropdown koppelen aan andere dropdown

Status
Niet open voor verdere reacties.

pietervandepoel

Gebruiker
Lid geworden
25 sep 2018
Berichten
9
Goedemiddag,

Voor mijn webwinkel wil ik de klanten een interactieve mogelijkheid geven om op basis van een aantal variabelen een foto te laten zien wat ze kunnen kopen.
Kortweg komt het versimpeld neer op het volgende (het is slechts een voorbeeld):

De klant kan uit een dropdownmenu kiezen uit bijvoorbeeld 4 merken auto’s (Renault, Ford, Volkswagen en Audi).
In het volgende dropdownmenu moeten de merken komen te staan die horen bij het gekozen auto merk. Bij Renault moet dan naar voren komen: Clio en Megane. Kiezen ze voor Volkswagen, dan moet er komen te staan Touran en Golf.

Daarnaast moet er op basis van de 2 gekozen variabelen een foto naar voren komen van de gekozen auto.

Ik weet dat het niet de bedoeling is om op dit forum te vragen naar complete codes (en dat hoef ik ook niet); het enige dat ik vraag is of iemand mij in de goede richting wil helpen.

Ik heb namelijk al heel wat codes in HTML, Javascript en CSS gezet, maar ik kom er elke keer achter dat het me lukt om de link te leggen tussen het 1e en het 2e dropdownmenu en met de foto.

Misschien overbodige informatie: maar de webwinkel is via Jimdo.

Alvast heel erg bedankt.
Met vriendelijke groet,
Pieter van de Poel
 
Heeft Jimdo dan HTML-ondersteuning?
Ik dacht dat het zo een klik-en-sleep editor is?
 
Maar kan je die ook dynamisch opbouwen door categorieën op te halen. Ik vrees dat Jimdo erg beperkt is in gebruik.
 
Ja, dat is een hele goeie.
Ik zal eerst wel even contact met Jimdo opnemen om de (on)mogelijkheden te bespreken.
In ieder geval alvast bedankt voor je hulp.
Gr Pieter
 
keuze1 bestaat uit 2 cijfers. keuze2 bestaat uit 4 cijfers waarvan de eerste 2 overeen moeten komen met keuze1.
De foto's staan in dit voorbeeld in mapje images
De foto's moeten als naam <option value="...."> van keuze2 hebben, in dit voorbeeld 1101.jpg, 1102.jpg, enzovoort.
Als er geen foto is gekozen dan is afbeelding "0.jpg" zichtbaar.

Het script heb ik gemaakt met jQuery, ik ga er vanuit dat dit in een webshop aanwezig is.

Code:
<select id="keuze1">
    <option value="0">- Kies fruit -</option>
    <option value="11">Appels</option>
    <option value="12">Bananen</option>
    <option value="13">Kiwis</option>
</select>

<select id="keuze2">
    <option value="0">- Kies soort -</option>
    <option value="1101">Appel 1</option>
    <option value="1102">Appel 2</option>
    <option value="1103">Appel 3</option>
    <option value="1201">Banaan 1</option>
    <option value="1202">Banaan 2</option>
    <option value="1203">Banaan 3</option>
    <option value="1301">Kiwi 1</option>
    <option value="1302">Kiwi 2</option>
    <option value="1303">Kiwi 3</option>
</select>

<img id="keuzeFoto" src="images/0.png" alt="" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // function: select <option> with value 0
    function setOption0 (selectId, trueFalse) {
        $(selectId + ' option[value=0]').prop('selected', trueFalse);
    }
    // function: disable <select> tag
    function setDisabled (selectId, trueFalse) {
        $(selectId).prop('disabled', trueFalse);
    }
    // function: loop the options, hide those without leading keuze1 value
    function hideOptions (select2id, select1val) {
        $(select2id + ' option').each(function() {
            $(this).css('display', 'inline');
            if ($(this).val().substr(0, 2) != select1val) {
                $(this).css('display', 'none');
            }
        });
    }
    // function: change src of image
    function imageSrc (imgId, src) {
        $(imgId).attr('src', src);
    }
    // initialize
    setOption0  ('#keuze1', true);
    setOption0  ('#keuze2', true);
    setDisabled ('#keuze2', true);
    $memo = $('#keuze2').val();
    // do this on changing select id="keuze1"
    $('#keuze1').on('change', function() {
        if ($(this).val() == '0') {
            setOption0  ('#keuze2', true);
            setDisabled ('#keuze2', true);
            imageSrc ('#keuzeFoto', 'images/0.png');
        } else if ($(this).val() != $memo) {
            setOption0  ('#keuze2', true);
            setDisabled ('#keuze2', false);
            imageSrc ('#keuzeFoto', 'images/0.png');
            hideOptions ('#keuze2', $('#keuze1').val());
        } else {
            setDisabled ('#keuze2', false);
            hideOptions ('#keuze2', $('#keuze1').val());
        }
        $memo = $(this).val();
    });
    // show correct image on changing select id="keuze2"
    $('#keuze2').on('change', function() {
        imageSrc ('#keuzeFoto', 'images/' + $(this).val() + '.jpg');
    });
});
</script>

Suc6. Have fun.
 
Graag gedaan. Ik kom er net achter dat in MS Internet Explorer 10+11 en MS Edge de css('display', 'none') niet werkt bij een option.
Daarom heb ik de functie hideOptions verandert zodat deze ook in MS browsers werkt.
Code:
// function: loop the options, hide those without leading keuze1 value
function hideOptions (select2id, select1val) {
    $(select2id).contents().each(function(index, node) {
        if (node.nodeType == 8) {
            $(node).replaceWith(node.nodeValue);
        }
    });
    $(select2id + ' option').each(function() {
        if ($(this).val().substr(0, 2) != select1val && $(this).val() != '0') {
            $(this).replaceWith(document.createComment(this.outerHTML));
        }
    });
}
Suc6. Have fun.
 
Graag gedaan:) en suc6 met de shop.
 
Ik heb het script gebruikt en er nu een mooie keuzelijst van gemaakt. Op mijn eigen computer werkt het super.

Ik loop alleen nog tegen probleem aan: het script zoekt nu mijn de map "images" op mijn computer en zoekt naar de naam van de foto die overeenkomt met de gemaakt keuze uit de 2e keuzelijst.

De foto's die ik in de webshop gebruik, zijn echter geupload op de server van de webwinkel. Daar krijgt elke foto een unieke naam die niet aan te passen is, zoals:
https://image.jimcdn.com/app/cms/im...5bd8f2c27769eb0a/version/1542825677/image.jpg en
https://image.jimcdn.com/app/cms/im...94c9fc12ff195be0/version/1543655572/image.jpg

Dat betekent dus dat ik het script niet kan laten zoeken naar een foto met een soortgelijke naam als de keuze uit de 2e keuzelijst.

Ik denk dat ik dan voor elke gemaakte keuze een losse link van de benodigde foto moet invoeren.
Op zich geen probleem, maar ik zie alleen niet hoe ik die zoekopdracht in het script moet invoeren.

Alvast bedankt voor de tips.
 
Dat is jammer, dan zit je aan een conversietabel vast. Voor elke optie in select 2 moet dan "path/naam" van de foto worden opgeven. In de bijlage vind je de bestanden. Zowel html als Javascript zijn op diverse plekken aangepast dus niet meer de vorige versie gebruiken.

Laat maar weten als je een vraag hebt.
 

Bijlagen

  • select.zip
    1,8 KB · Weergaven: 31
Hoi Bron,
het script werkt super. Ik ben bezig met het finetunen van de site en om alle links van de foto's in het script te zetten.
Maar nu ik merk nu dat ik mijn klanten wellicht beter kan bedienen als ik ze 3 keuzemenu's geef in plaats van 2 en dat de foto naar voren komt bij het 3e keuzemenu. Dus bijvoorbeeld: merk, model en kleur.

Ik zit echter al een aantal dagen te proberen om het huidige script aan te passen naar 3 keuzemenu's, maar ik kom er niet uit. Ik snap wat er in het script staat, maar het lukt me niet om het aan te passen.

Zou jij me hier nog één keertje mee willen helpen?

Alvast heel erg bedankt.

Gr. Pieter
 
Het wordt bij veel keuzemenu's wel wat spaghetti, niet lekker te onderhouden tenzij je weinig keuzes hebt per keuzemenu. Stel dat het aantal mogelijkheden bij keuze1 5 is, bij keuze2 7 is, en bij keuze3 4 is. Dan heb je al 140 keuze mogelijkheden. In de bijlage de gewijzigde html en javascript. Wil je laten weten of het hiermee is gelukt?
 

Bijlagen

  • select-2.zip
    4,7 KB · Weergaven: 30
Graag gedaan en een fijne kerst. Suc6 met je website :thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan