jQuery create new select elements

[eburlea]

Hi. I have a select box with the id=1. I need a solution for: when changing the select box with the id=1 to appear another select box with the id=2 and when changing the select box with the id=2 to appear another with the id=3, and so on.
I have writen a code, and I do not understand why it does not work the way I need. It works only when I change the first select box. Can somebody advise, please.

<select id="1" name="1">
    <option value="Value 1">Text 1</option>
    <option value="Value 2">Text 2</option>
    <option value="Value 3">Text 3</option>
    <option value="Value 4">Text 4</option>
    <option value="Value 5">Text 5</option>
</select>

<div id="newselect">&nbsp;</div>

<script type="text/javascript">
$(document).ready(function(){
    var i = 1;

    $('#' + i).change(function(){
        i++;
        alert(i);
        var s = $('<select id="' + i + '" name="' + i + '" />');
        $("<option />", {'value':'Value 1', 'text':'Text 1'}).appendTo(s);
        $("<option />", {'value':'Value 2', 'text':'Text 2'}).appendTo(s);
        $("<option />", {'value':'Value 3', 'text':'Text 3'}).appendTo(s);
        $("<option />", {'value':'Value 4', 'text':'Text 4'}).appendTo(s);
        $("<option />", {'value':'Value 5', 'text':'Text 5'}).appendTo(s);
        s.appendTo("#newselect");
    });

})
</script> 

[diafol]

I'm assuming it's because you only attach the change event to the first select.

 $('#' + i).change(function(){

Is in fact

  $('#1').change(function(){

Although you create $('#2') - a change event isn't assigned to this.

Anyway, I doubt if it would work as the select doesn't exist you try to assign the change event to it. If you want to do this, try the 'on' syntax, on a pre-existing container tag.
Also it may be better to identify selects by classname and by using 'this' and a data-id attribute top get the id (number), although the latter is not necessar as the 'id' attribute can be used - however, I find using integers for html id attributes rather clumsy:

<div id = "container">
    <select id="select1" name="select1" class="myselect" data-id="1">
        <option value="Value 1">Text 1</option>
        <option value="Value 2">Text 2</option>
        <option value="Value 3">Text 3</option>
        <option value="Value 4">Text 4</option>
        <option value="Value 5">Text 5</option>
    </select>

    <div id="newselect"></div>
</div>

The append code looks ratheer verbose too. Why not just save the lion's share in a var and just prepend the opne select tag:

var selectbody = '<option value="Value 1">Text 1</option>
        <option value="Value 2">Text 2</option>
        <option value="Value 3">Text 3</option>
        <option value="Value 4">Text 4</option>
        <option value="Value 5">Text 5</option>
    </select>';

...

//in the function
dataid = $('this').attr('data-id');
i = parseInt(i) + 1;
selecthead = '<select id="select' + i + '" name="select' + i + '" class="myselect" data-id="' + i + '">';
select = selecthead + selectbody;

But I'm a litle confused here as your function seems to want to create a new select every time it's changed.

[eburlea]

You are right, diafol. The change event applies only to the first select. So, I thought to use a function for creating other elements to which the change events can be applied. The following code is working:

<select id="1" name="1">
    <option value="Value 1">Text 1</option>
    <option value="Value 2">Text 2</option>
    <option value="Value 3">Text 3</option>
    <option value="Value 4">Text 4</option>
    <option value="Value 5">Text 5</option>
</select>

<div id="newselect">&nbsp;</div>

<script type="text/javascript">
$(document).ready(function(){
    var totalElements = 1;

    function createElement(elementId) {        
        var s = $('<select id="' + elementId + '" name="' + elementId + '" />');
        $("<option />", {'value':'Value 1', 'text':'Text 1'}).appendTo(s);
        $("<option />", {'value':'Value 2', 'text':'Text 2'}).appendTo(s);
        $("<option />", {'value':'Value 3', 'text':'Text 3'}).appendTo(s);
        $("<option />", {'value':'Value 4', 'text':'Text 4'}).appendTo(s);
        $("<option />", {'value':'Value 5', 'text':'Text 5'}).appendTo(s);
        s.appendTo("#newselect");

        $('#' + elementId).change(function(){
            for(var n=elementId+1;n<=totalElements;n++) {
                $('#' + n).remove();
            }
            createElement(elementId + 1);
            totalElements = elementId + 1;
       });
    };

    $('#1').change(function(){
        for(var n=2; n<=totalElements; n++) {
            $('#' + n).remove();
        }
        createElement(2);
        totalElements++;
    });

})
</script>