javascript - 使用 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 库。

因此，如果有人可以帮助这个有点超出他能力范围的饱受摧残和伤痕累累的后端开发人员，我们将不胜感激。请温柔点；这是漫长的一天。

Answer 1

嗯……我threw something together .希望它能帮助您解决这个问题。