使用jQuery构建动态HTML，还有比这更简单的方法吗？

Question

在浪费了将近一天的时间尝试实现以下功能后，我决定冒险提出一个愚蠢的问题，风险也比JavaScript对我的伤害小得多。

在我看来，我要实现的内容应该很容易。我有一个表单，显示以下内容的行：

- 一个月份下拉框 - 一个年份下拉框 - 一个文本框

这些内容将根据表单中先前选择的选择语句动态创建（例如，如果选择了两个，则会出现两行等），但始终至少显示一行，我将其设想为在for循环中具有默认值。以下是我构建它的伪代码：

<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>

我遇到的问题包括找不到使用jquery构建选择下拉菜单的方法，以确保每一行的表单元素都具有唯一的标识符，供后端脚本解析其值进行数据库插入，或者如何在尝试使用append、appendTo、add等组合之后将其“回显”到屏幕上。我想我可能还没有尝试过jquery库的一半。

因此，如果有人能帮助这个疲惫不堪、有些超出了自己领域的后端开发人员，那么这将非常感激。请温柔一点，今天真的很长。

- canadiancreed

---

@sje397 在问题上进行了修正，以反映我在脚本中的布局。在这次努力开始之前，id、method和action已经存在。 - canadiancreed

为什么不使用标准的 jQuery 插件？ - megas

@megas 没有理由不这样做，我想。虽然我更喜欢保持尽可能简单，但如果有任何插件可以满足我的需求，它们在我的应用程序中更加受欢迎。 - canadiancreed

@domanokz 这是我用伪代码的方式解释，我想在用户更改选择菜单时获取其值，至少根据我记得的Java语法。如果没有更改，则该值将默认为声明的值1。 - canadiancreed

在jQuery中，$('#show-options').val()可以实现。 - kazinix

Answer 1

好的...我做了些东西。希望这能为你提供一些帮助。

- Joseph Marikle

---

不错，非常简洁的解决方案。也许你可以只删除年份数组元素的名称。我认为canadiancreed只是从php中采用了这种方法。 - kazinix

尝试了一下。在 jsfiddle 上它可以工作，但是复制完全相同的代码却没有任何反应，在 Firefox 的错误控制台中也没有错误。不认为我漏掉了什么，但会继续摸索。 - canadiancreed

不错。如果你进行微调，可以在保留现有行的同时创建必要的行：http://jsfiddle.net/rkw79/FeKqp/4/ - rkw

@canadiancreed 嗯，那很奇怪。我不知道为什么会这样。但无论如何，你可能需要休息一下，不要一直盯着所有的代码。希望你能让你的代码工作起来，如果你卡住了，请在这里提问。 :) - Joseph Marikle

Answer 2

这是更长版本的代码： 为了快速测试: 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>

在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);
    }


}

请避免像我在这里做的那样进行许多字符串拼接，我只是为了使代码更清晰易懂而这样做。

- kazinix