jQuery create select и set value

Question

У меня есть функция, которая обрабатывает массив, который обрабатывается с ним, а затем выполняется цикл для создания одной таблицы в наборе данных в массиве, причем строки таблицы имеют три ячейки - один текстовый ввод и два выбора. Эта же функция также должна устанавливать два значения выбора с использованием данных, которые он получает, но это моя проблема, так как это происходит неправильно.

Вот целая функция:

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

    } 

    } 

То, что происходит это, если есть два набора данных, которые создают две строки таблицы, то конечный результат должен быть:

Ввод текста | Выберите | Выбрать
Melbourne | 2001 | 2008
Балларат | 2008 | Присутствует

Вместо этого это выглядит так:
Melbourne | 2008 | Присутствует
Балларат | Неизвестно | Присутствует

Он предлагает мне, что по мере того, как функция будет повторяться во второй раз (или в последующее время после этого), значения следующего массива переписывают первую строку таблицы, а не будут правильно вставлены во вторую. Таким образом, я заканчиваю первую строку таблицы, содержащую элементы второй строки в ней, которая не является тем, что мне нужно.

Я думаю, это может произойти потому, что в настоящее время в этой таблице есть два выбора с тем же именем и идентификатором, но я не уверен, как я могу сделать их уникальными значениями в качестве моих текущих попыток интеграции счетчика (как видно в тексте ввода названия местоположения) не сработали.

Заранее спасибо.

Answer 1

Я думаю, вы правы, что проблема связана с идентификаторами.

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

Эта линия будет возвращать только первый элемент с идентификатором «» date_to_select_edit, что он находит. Чтобы дать им уникальный идентификатор, просто добавьте индекс цикла в конец. например:

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

Я не уверен, что вы пытаетесь сделать там с прилавком. (кажется, вы увеличиваете его в конце цикла, а затем снова устанавливаете его в начале следующей итерации). Я не думаю, что вам все равно понадобится счетчик. Ваша переменная цикла i должна работать нормально.