添加選項以在每個表行中選擇

Question

我在每個表行中都有一個帶有多個“選擇”的表。

我需要遍歷每個表行，並將“選項”附加到數組的選擇中。 當前，只有表中的第一個“選擇”填充了數組中的數據。

我有以下HTML：

<table id="myTable">
<thead>
    <tr>
        <th>Code</th>
        <th>Date</th>
        <th>Description</th>
        <th>Percentage</th>
    </tr>
</thead>
<tbody>
    <tr class="RepeatingSection">
        <td>
            <select id="InputCode"></select>
        </td>
        <td>
            <input type="date" name="Date" id="DateInput" required="required" />
        </td>
        <td>
            <input type="text" id="DetailsInput" name="Details" size="35" required="required" />
        </td>
        <td>
            <input type="number" id="percentageInput" max="100" value="100" />%</td>
    </tr>
    <tr class="RepeatingSection">
        <td>
            <select id="InputCode"></select>
        </td>
        <td>
            <input type="date" name="Date" id="DateInput" required="required" />
        </td>
        <td>
            <input type="text" id="DetailsInput" name="Details" size="35" required="required" />
        </td>
        <td>
            <input type="number" id="percentageInput" max="100" value="100" />%</td>
    </tr>
    <tr class="RepeatingSection">
        <td>
            <select id="InputCode"></select>
        </td>
        <td>
            <input type="date" name="Date" id="DateInput" required="required" />
        </td>
        <td>
            <input type="text" id="DetailsInput" name="Details" size="35" required="required" />
        </td>
        <td>
            <input type="number" id="percentageInput" max="100" value="100" />%</td>
    </tr>
</tbody>

我目前有以下JavaScript：

var array;
var i;
var option;
var select;

array = [001, 002, 003, 004];

for (i = 0; i < array.length; i++) {
  option = document.createElement("option");
  option.value = array[i];
  option.text = array[i];
  select = document.getElementById("InputCode");

  $('#myTable .RepeatingSection').each(function() {
    $(this).find('#InputCode').each(function() {
      select.appendChild(option);
    })
  })
  select.appendChild(option);
}

也請看我的小提琴

任何幫助，將不勝感激。 希望這篇文章有意義。

Answer 1

嘗試以下JavaScript代碼：

var array;
var i;
var option;

array = [001, 002, 003, 004];

for (i = 0; i < array.length; i++) {
    option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];

    $('#myTable .RepeatingSection').find( "select[id=InputCode]" ).append(option);
}