Question

正如标题所说，我想知道是否有办法改变由jquery生成的html项的值。这是我目前的代码：

javascript

<script type="text/javascript">

$(document).ready(function() {
    $('#months').change(function() {
        var currentDate = new Date();
        var curentMonth = currentDate.getMonth();
        var curentYear = currentDate.getYear();

        $(".row:not(:first)").remove();
        for (var i = 0; i < this.selectedIndex; i++)
        $(".row:first").clone(true).insertAfter(".row:last");
        $('#dateDueMonth['+i+']').val(curentMonth + 1);
    })
});

</script>

我的想法是，在克隆行之后，我可以根据它的当前名称更改下拉列表内容，但显然这不起作用，我一直无法找到“挂钩”到动态html的方法内容。

和基础html

<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>
</td><div id="showRows"><div class="row" id="row[]"><td class="td_alt"><select id="dateDueMonth[]" name="dateDueMonth[]" >
<option value="0">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>

<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option selected value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>

 <select id="dateDueYear[]" name="dateDueYear[]">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected value="2011">2011</option>
</select>

现在，动态html和表单提交的生成效果很好。给我可以用于后端代码的数据。但是，如果我能够按照我认为合适的方式增加各种下拉列表中的值，那么使用此页面的人员可以更容易地进行数据输入，因此问题就出现了。

对于所有回复，感谢您对此jquery / JS noob的帮助。

编辑：为此我想要的是一个表格，它可以生成多个副本，这些副本包含在showRows div中。提交时，我希望它能够为数组中的每个select / input语句收集生成的行的信息。例如，如果我选择了两个月，则dateDueMonth，dateDueYear和amount将是我的表单中的数组，每个数组都有两个条目。当前代码执行此操作，但默认情况下，下拉菜单的默认元素设置与其克隆的HTML行相同。

Answer 1

不确定你想做什么，但它应该像这样工作

$(document).ready(function() {
    $('#months').change(function() {
        var currentDate = new Date();
        var curentMonth = currentDate.getMonth();
        var curentYear = currentDate.getYear();
        var arr;
        $(".row:not(:first)").remove();
        for (var i = 0; i < this.selectedIndex; i++)
        arr=[$(".row:first").clone(true).insertAfter(".row:last")];
        $('#dateDueMonth['+i+']').val(curentMonth + 1); //don't know why its here

        arr[0].text("your value"); //apply the index you wanna change
    })
});

Answer 2

您是否尝试实现此类标记？ Demo

<div id="showRows"><div class="row" id="row[0]"><select id="dateDueMonth[0]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>

<select id="dateDueYear[0]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>

</div><div class="row" id="row[1]"><select id="dateDueMonth[1]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>

 <select id="dateDueYear[1]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>

...

这可能就是你所需要的。请参阅我上面链接的演示。

for (var i = 1; i <= this.selectedIndex; i++) {
    row = $(".row:first").clone(true)[0];
    row.id = "row["+i+"]";
    $(row).find("[id^='dateDueMonth']").attr("id","dateDueMonth["+i+"]").val((curentMonth + i) % 12 + 1);
    $(row).find("[id^='dateDueYear']").attr("id","dateDueYear["+i+"]");
    $(row).insertAfter(".row:last");
}

Answer 3

你不能在JavaScript中使用id作为数组。如果需要，还必须在创建元素时放入数组索引。或者只是像下面那样访问select元素

$(document).ready(function() {
    $('#months').change(function() {
        var currentDate = new Date();
        var curentMonth = currentDate.getMonth();
        var curentYear = currentDate.getYear();

        $(".row:not(:first)").remove();
        for (var i = 0; i < this.selectedIndex; i++) {
            $(".row:first").clone(true).insertAfter(".row:last");
            $('.row:last select').val(curentMonth + 1);
        }
    })
});

Working sample

使用Jquery更改动态生成的html中的值

3 个答案: