Ages of the kids

How to add a number of dropdowns based on the value in a dropdown

by Akram kamal

HTML

<label>kids
    <select name="kids" data-from="1" data-to="9"></select>
</label>
<label>ages
    <select name="ages" data-from="1" data-to="18"></select>
</label>

JavaScript

$(function () {
    $("[data-from]").append(function () { // easier than typing all the options!
        var options = ""
        for (var i = $(this).data("from"); i <= $(this).data("to"); i++) {
            options += "<option>" + i + "</option>"
        }
        return options
    })
    $('[name="kids"]').change(function () {
        var kids = $(this).val()
        var ages = $('[name="ages"]')
        if (kids > ages.length) { // add
            for (var i = ages.length + 1; i <= kids; i++) {
                console.log(i)
                ages.last().clone().insertAfter(ages.last())
            }
        } else {
            ages.slice(kids).remove()
        }
    })
})