Как обработать select в форме?

Question

[Денис Трифонов]

Доброго времени суток. Проблема такая, есть форма, в ней пункт "сколько детей". Он реализован через select и в нем 5 option (максимальное количество детей). Изначально value 0. Как реализовать чтобы если выбирался например value со значением 1, то рядом выползал еще один option, с выбором возраста ребенка? И в зависимости от количества детей появляется необходимое количество option с выбором их возраста. Еще как условие, optionы выбора возраста уже написаны и стилизованы, просто с display:none;, та что нужно чтобы появлялся определенный option(пусть привязка будет к классу или айдишнику). Я понимаю что это js, но не силен в нем. КТо поскажет как сделать.

Answer 1

[Михаил Макаров]

$(document).ready(function() {
    var count = 5, i, j, el, child;
    var container = $('#container');

    el = $(document.createElement('select'));
    container.append(el);
    for (i = 0; i < count; ++i) {
        child = $(document.createElement('option'));
        child.attr('value', i + 1);
        child.text(i + 1);
        el.append(child);
    }

    el.change(function() {
        count = parseInt($(this).find(':selected').text());

        for (i = 0; i < count; ++i) {
            el = $(document.createElement('select'));
            container.append(el);

            for (j = 0; j < 18; ++j) {
                child = $(document.createElement('option')).attr('id', 'child' + i);
                child.attr('value', j);
                child.text(j);
                el.append(child);
            }
        }
    });
});

Comments

[Денис Трифонов]

Спасибо что откликнулся. МОжешь чуть пояснить код, а то я с js пока не ахти..