jQuery创建select和set值

时间:2015-07-26 16:18:05

标签: javascript jquery

我有一个函数,它接受一个解析它的数组,然后遍历以在数组中为每个数据集创建一个表行,表行有三个单元格 - 一个文本输入和两个选择。同样的函数也应该使用它收到的数据设置两个选择值,但这是我的问题,因为它没有正确发生。

以下是整个功能:

function editVehicleServiceHistory(serviceHistory){

    var rows = serviceHistory;
    for (var i=0; i < rows.length; i++){  

    var setLocation = rows[i].sh_location;
    var setDateFrom = rows[i].sh_location_from;
    var setDateTo = rows[i].sh_location_to;

    counter = $('#myTable tr').length - 2;

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" class="location-edit-input-size" name="location' + counter + '" value="'+ setLocation +'"/></td>';

    cols += '<td><select name="date_from_select_edit" id="date_from_select_edit"><option value="Unknown">Unknown</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option></select></td>';

    $('#date_from_select_edit').val(setDateFrom);

   cols += '<td><select name="date_to_select_edit" id="date_to_select_edit"><option value="Present">Present</option><option value="Unknown">Unknown</option><option value="2015">2015</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1984">1984</option><option value="1983">1983</option><option value="1982">1982</option><option value="1981">1981</option><option value="1980">1980</option></select></td>';
    $('#date_to_select_edit').val(setDateTo);

    cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';

    newRow.append(cols);

    $("table.order-list").append(newRow);

    counter++;

    }

  }

这是怎么回事,如果有两组数据创建两个表行,那么最终结果应该是:

文字输入|选择|选择
墨尔本| 2001 | 2008
巴拉瑞特| 2008 |本

相反它看起来像这样:
墨尔本| 2008 |目前
巴拉瑞特|未知|本

它向我建议,当函数第二次循环(或之后的后续时间)时,下一个数组的值将覆盖第一个表行而不是正确插入第二个表行。所以我最后得到的第一个表行包含第二个故事行的元素,这不是我之后的事情。

我认为可能会发生这种情况,因为目前该表中有两个选项具有相同的名称和ID,但我不确定如何将它们作为我当前尝试集成计数器的唯一值(如在位置名称文本输入中看到)没有工作。

提前谢谢。

1 个答案:

答案 0 :(得分:0)

我认为您已经纠正了ID问题。

 $('#date_to_select_edit').val(setDateTo);

该行只会返回ID为&#39; date_to_select_edit&#39;的第一个元素。它找到了。要为它们提供唯一的ID,只需将循环索引附加到它的末尾即可。像这样:

<select name="date_from_select_edit' + i + '" id="date_from_select_edit' + i + '">

我不确定你用计数器做什么。 (似乎你在循环结束时递增它,然后在下一次迭代开始时再次重置它)。尽管如此,我认为你还不需要这个柜台。你的循环变量&#39; i&#39;应该工作得很好。