Nieuws:

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: jquery event voor select object  (gelezen 863 keer)

Offline MKe

  • Lid
jquery event voor select object
« Gepost op: 2014/03/27, 15:57:55 »
Een noob vraag over jquery.

Is er een event in jquery die aangeeft dat de optie lijst van een select-box is veranderd?
Ik heb een keten van 3 select-boxen gemaakt die op elkaar reageren. Op zich graat dit goed, maar de veranderingen worden alleen naar de child doorgevoerd en niet naar het niveau eronder. m.a.w. als ik in de eerste select een optie kies, dan veranderd de tweede ook, maar de 3e blijft hetzelfde. Ook bij het laden van de pagina is er in de eerste select al wel iets geselecteerd, maar in de rest niet.
Wat is de goede manier om dit te doen?

mijn html:
<select id="test1" blaat="#test2" class="vervolg">
    {% for o in lijst %}
    <option id="test1" value="1" class="vervolg" child="#test2">a</option>
    <option id="test2" value="2" class="vervolg" child="#test3" >b</option>
    <option id="test3" value="3">c</option>
    {% endfor %}
</select>

<select id="test2" blaat="#test3" class="vervolg">
</select>

<select id="test3">
</select>

Mijn javascript:
<script>
    $(document).ready(function() {

        $(".vervolg").change(function(){
            var par = $(this).attr('id');
            var child = $(this).attr('child');
            var select = $(this).find("option:selected").attr("value");
            $.get("ajax/maak2/" + par + "/" + select + "/", function(data){
               
                var sel = $(child);
                sel.empty();
                for (var i=0; i <data.length; i++) {
if (i==0){
sel.append('<option value="' + data[i].id + '" selected>' + data[i].desc + '</option>');
}else{
                    sel.append('<option value="' + data[i].id + '">' + data[i].desc + '</option>');
}
                   
            }
            }, "json");
        });
    });

</script>

Re: jquery event voor select object
« Reactie #1 Gepost op: 2014/03/28, 16:51:21 »
Helaas heb ik ook niet veel ervaring met jquery MKe, maar vind het wel interessant om even naar te kijken.

Als je iets in de selectbox 2 verandert, worden er dan wél veranderingen in selectbox 3 doorgevoerd? Dat alleen checkbox 2 verandert vind ik niet zo vreemd. Jquery koppelt de door jou gedefinieerde change functie aan alle elementen met de klasse "vervolg". Als je op checkbox 1 klikt verandert alleen deze van waarde dus wordt ook alleen voor die box de change functie aangeroepen. Binnen de functie change kijk je in jouw code 1 niveau naar onderen. Je moet eigenlijk de child van de child meenemen om jouw gewenste functionaliteit te bereiken bij een verandering in de checkbox 1. Wil je het generiek maken (voor n childs) zou dat bijvoorbeeld kunnen met een while loop (zolang child niet null is).

Re: jquery event voor select object
« Reactie #2 Gepost op: 2014/03/28, 23:04:00 »
Kon het toch niet laten om zelf een structuur op te zetten om ten eerste jouw code uit te kunnen voeren. Ik neem aan dat jij de JSON-data laat generen op een server? Gezien de {% %} tags vermoed ik ook dat je Jango templates gebruikt?

Maar goed, voorlopig heb ik de code zo aangepast dat ook de derde selectbox wordt ingevuld en in principe de N-de ook ;) Lastig hierbij is de laadfunctie voor de JSON-data. Dit zorgt voor asynchrone uitvoer van code. Op het moment dat het vullen van een selectbox nog bezig is zal .find() geen geselecteerd item teruggeven. Dat is nu opgelost door de laadfunctie selectionReady() te laten aanroepen. Dan pas wordt van deze geladen checkbox naar het child-attribuut gekeken etc.

lokale mappenstructuur:

In de mappen test1 en test2 zitten bestanden met als naam de option value en als inhoud een array bestaande uit een of meerdere JSON-objecten met de attributen id en desc.

code:
http://pastebin.com/960fBMJc
« Laatst bewerkt op: 2014/03/28, 23:07:17 door erik1984 »

Offline MKe

  • Lid
Re: jquery event voor select object
« Reactie #3 Gepost op: 2014/03/30, 14:52:17 »
Hoi Erik,

Deze code draait op een Django installatie en er wordt inderdaad json data terug gestuurd. Ik zal je code eens bestuderen, bedankt!