[JQuery] chain select + multiply selectbox

[verstraeten_m]

Beste,

Ik heb op dit moment 2 selectboxes welke middels PHP icm Jquery gevuld worden. Nu wil ik echter van de 2e selectbox meerder instantie kunnen weergeven (max 15).
Ik heb dus een knop aangemaakt en ik weet hoe ik een box kan toevoegen maar ik krijg het niet gecombineerd met die chain-select.

(na een druk op de knop, moet ik dus de selectbox "loot" meerdere keren zien, ik moet ze ook regel voor regel eventueel weg kunnen halen)

JavaScript:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#adventure").change(function(){
            var value = $(this).val();
            $.ajax({
                type : "GET",
                url : 'new_loot.json.php',
                data : {
                    adventure : value
                },
                success : function(data){
                    $('#loot').html(data);
                }
            })
        });
    });
</script>

HTML:

<table>
    <tbody>
        <tr><td>Kies hier je avontuur:</td></tr>
        <tr><td>
            <select name="adventure" id="adventure">
            <option value="">Kies een avontuur</option>
            <option value="1">Bandietennest</option>
            <option value="2">Belegering</option>
            <option value="3">Bijeendrijven van Piraten</option>
            <option value="4">Buskruit</option>
            <option value="5">Dappere Kleermakertje</option>
            <option value="6">Duistere Broederschap</option>
            <option value="7">Duistere Priesters</option>
            <option value="8">Garrun de Pelsjager</option>
            <option value="9">Heldhaftige Kleermakertje</option>
            <option value="10">Invasie van de Vikingen</option>
            </select>
        </td></tr>
        <tr><td>&nbsp;</td></tr>
        <tr><td>Loot items:</td></tr>
        <tr><td>
            <div class="input_fields_wrap">
                <button class="btnlite">Loot items toevoegen</button><br>
                <div>
                    Loot Item <select name="loot[]" id="loot">
                    <option value="21">Aanvulling - Gouderts - 200</option>
                    <option value="20">Aanvulling - IJzerertsaanvulling - 400</option>
                    <option value="19">Aanvulling - Kolen - 800</option>
                    <option value="18">Aanvulling - Kopererts - 800</option>
                    <option value="24">Avontuur - Terug naar het Bandietennest</option>
                    <option value="22">Bloembed - Blauw</option>
                    </select>
                </div>
            </div>
        </td></tr>
        <tr><td>&nbsp;</td></tr>
        <tr><td>&nbsp;</td></tr>
    </tbody>
</table>

[ Voor 3% gewijzigd door verstraeten_m op 10-12-2014 09:05 . Reden: Tekst typo/vergeten. ]

[Sthomkop]

Zoiets? Ik weet niet zeker of ik begrijp wat je wil, maar dit lijkt me een stap in de goede richting. Dat maximum van 15 moet wel lukken denk ik zo, of niet?

Tips

• Maak een JS fiddle, dat werkt makkelijker
• Kijk eens naar de uitstekende jQuery API documentatie.