Using jquery to build dynamic html, or it must be easier then this

Question

After wasting almost a day trying to achieve the following, I've decided to risk the slings and arrows that may appear by asking a silly question. It has to be less painful then what javascript has done to me.

What I'm trying to achieve should be very easy IMO. I have a form that displays row(s) of the following content:

• A month dropdown
• A year dropdown
• A input text box

which would be dynamically created based upon the selection of a select statement earlier in the form (eg. If two was selected, you get two rows appearing, etc...) but always having at least one row showing, which I pictured as having a default value in a for loop. Here's a pseudocode of how I figured it to be built:

<script type="text/javascript">

var months = array(array of months);

var years = array(2010=>2010,2010=>2011,2010=>2012);

function buildRows() {
    var dropdownValue = 1;

    dropdownValue = $('#show-options').change().val();

    $('#showRows').html('');

    //create amount of rows based upon the value selected in the dropdown list
    for (i = 1; i <= dropdownValue; i++) {
         //create select dropdown populated by the months array declared earlier
         //create select dropdown populated by the years array declared earlier
         //create input textbox
    }

    //return built html
}    
</script>

<form id="sampleForm" method="POST" action="process.php">
    <select id="months" name="months">
    <option selected value="1">1</option>

    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>

    <option value="11">11</option>
    <option value="12">12</option>
    </select>

<div id="showRows"></div>
    </form>

Issues I've ran into include not finding any way to use jquery to build select dropdown menus, to make sure each row's form elements would have unique identifiers for the backend script that would parse it's values for DB insertion, or how it would be "echoed" back to the screen (after trying a combination of append, appendTo's, add, and I'm sure more, I wonder if I haven't' tried half the jquery library.

So if anyone could help this battered and bruised backend developer that is a bit out of his element, it would be very much appreciated. And please, be gentle; it's been a long day.

Answer 1

Well... I threw something together. Hopefully it'll give you a leg up on this.

Answer 2

Here's a longer version of it: To test it quickly: http://jsfiddle.net/D6nVZ/1/

<!-- Select where user selects how many rows to show -->  
<select id="Select1">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<!-- Later will contain the generated rows. I use table since we are createing tabular data/input fields -->
<table id="RowsContainer" border="1">
</table>

In JavaScript:

//Make sure everything's loaded before running scripts...
window.onload = function(){
    //Your month and year array...
    ArrMonths = ['Jan', 'Feb', 'Mar'];
    ArrYears = [1990, 1991, 1992];        

    //Create pointers to DOM elements that will be used...
    Select1 = $('#Select1');
    RowsContainer = $('#RowsContainer');

    //Attach event handler to the select so that when a user selects, rows will be generated...
    $(Select1).bind('change',GenerateRows);
}


//Function that will do the generation of rows...
function GenerateRows()
{
    //Prepare the number of loops
    var SelectedNumber = 1;
    if($(Select1).val() != '')
    {
        SelectedNumber = parseInt($(Select1).val());
    }

    //Prepare select elements to use
    //Prepare the months' select element
    var MonthSelect = '<select name="Month">';

    for(var i=0; i<ArrMonths.length; i++)
    {
        MonthSelect += '<option value="' + ArrMonths[i] + '">' + ArrMonths[i] + '</option>';

    }
    MonthSelect += '</select>';

   //Prepare the years' select element
    var YearSelect = '<select name="Year">';
    for(var i=0; i<ArrYears.length; i++)
    {
        YearSelect += '<option value="' + ArrYears[i] + '">' + ArrYears[i] + '</option>';

    }
    YearSelect += '</select>';

    //Add rows to the table
    //Clear before filling...
    RowsContainer.html('');
    for(var i=1; i<=SelectedNumber; i++)
    {
        //Create new row here with months' and years' select we have created
        var NewRow = '<tr>' +
                         '<td>' + MonthSelect + '</td>' +
                         '<td>' + YearSelect + '</td>' +
                         '<td><input name="SomeName" type="text" /></td>' +
                     '</tr>';
        //Append each row created to the table (inside the table)
        RowsContainer.append(NewRow);
    }


}

Please avoid many concatenations as I did here, I just do it to make code cleaner and understandable.