JQuery: Create n selects after choosing it in the select box

I have this select:

<select name="main">
<option value="2">2s</option>
<option value="3">3s</option>
<option value="5">5s</optio开发者_JAVA技巧n>
</select>

How do I make, that after choosing 2s, 2 selects would be created:

<select name="select1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="select2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

After choosing 3s, it would create 3 selects and so on. Thanks

Would appreciate jsfiddle example

In the change function of your first select something like...

function selChanged(){
    var number=$('option:selected',$(this)).val();

    for (var i=0; i<number; i++){
        var newSel = $('<select name="newSelect'+i+'">');
        for (var iOpt=0; iOpt<3; iOpt++){
            var opt = $('<option value="*">*</option>'.replace('*',iOpt));
            newSel.add(opt);
        }
        $(this).insertAfter(newSel);
    }   
}

totally untested but something like that

UPDATE

$('select[name=main]').change(function(){selChanged(this);});

function selChanged(con){
    var number=$('option:selected',$(con)).val();

    //remove existing
    $("[name^='newSelect']").remove();

    for (var i=0; i<number; i++){
        var newSel = $('<select name="newSelect'+i+'">');
        for (var iOpt=0; iOpt<3; iOpt++){
            var opt = $('<option value="*">*</option>'.replace(/\*/g,iOpt));
            newSel[0].options.add(opt[0]);
        }
        newSel.insertAfter($(con));
    }   
}

$("select[name=main]").change(function() {
    var elemCount = $(this).val();
    for(var i=0; i<elemCount; i++) {
        var HTML = "<select name='select+i' />";
        $(HTML).append("<option value='0'>0s</option>");
        $(HTML).append("<option value='1'>1s</option>");
        $(HTML).append("<option value='2'>2s</option>");
        $("div.container").append(HTML);
    }
});

<div class="container"></div>