设计:下拉+标签+按钮和重复行

Question

我有一个与设计相关的问题。

我有添加产品的账单。每行添加一个产品。每行图像添加一个产品

添加产品时，我还会在"保修"列中显示其保修：

所选产品在保修栏中显示保修

但是当我添加任何其他产品时，我无法显示其保修。无法在后续产品中显示保修

我的 HTML 下拉选项是动态出现的：

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                <i class="fa fa-times"></i>
            </button>
        </td>
    </tr>
</tbody>

我的JS用于在账单中添加行：

$(document).ready(function () {
    var counter = 0;
    $("#addrow").on("click", function () {
        var newRow = $("<tr class='text-center'>");
        var cols = "";
        cols += '<td><select name="bill_product[]"><option disabled selected value="">Select Product</option><cms:pages masterpage="product.php"><option value="<cms:show k_page_id />"><cms:show k_page_title /></option></cms:pages></select></td>';
        cols += '<td><input type="text" id="txtbox" name="txtbox" /></td>';
        cols += '<td><button type="button" class="ibtnDel btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow);
            counter++;
        });
        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();       
                counter -= 1
            });
        });

显示保修结束日期的"我的代码"：

$(document).ready(function() {
    $("#myDropdown").change(function() {
        var selectedValue = $(this).val();
        $("#txtbox").val(selectedValue);
    });
});

问题：我无法在第一个产品之后的任何产品上显示保修日期的值。

请帮忙。

PS：我正在使用CouchCMS将我的值动态带到选择的选项标签。

Answer 1

这是我

提出的解决方案，顺便说一下，我摆脱了非本机JS，它允许它适合任何解决方案：

<tbody style="border: 1px solid rgba(0,0,0,0.35); height: 34px; line-height: 34px;">
    <tr class="text-center">
        <td>
            <select id="myDropdown" name="bill_product[]" onChange="dropdownTip(this.value)">
                <option disabled selected value="">Select Product</option>
                <option id="1" value="31/01/2020">Product #1</option>
                <option id="2" value="31/01/2030">Product #2</option>
                <option id="3" value="31/01/2040">Product #3</option>
            </select>
        </td>
        <td>
            <input name="txtbox" type="text" id="txtbox" />
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-xs disabled">
                Delete
            </button>
        </td>
    </tr>
</tbody>

// Line removal
let delBtns = document.querySelectorAll(".del-btn");
[].forEach.call(delBtns, function(delBtn){
    delBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;
    let lineToRemove = document.querySelector("#line-"+line);
    lineToRemove.remove();
  })
});
// Input update
let productDropDowns = document.querySelectorAll("select");
[].forEach.call(productDropDowns, function(dropDown){
    dropDown.addEventListener('change', function(event){
    let line = event.target.dataset.line;
    document.querySelector('#line-'+line+' input').value = event.target.value;
  })
});
// New line button
let count = 0;
let newLineButton = document.querySelector("#newLineTrigger");
newLineButton.addEventListener('click', function(){
    count++;
    let tableBody = document.querySelector('tbody');
  let newLine = document.createElement('tr');
  newLine.id = 'line-' + count;
  tableBody.appendChild(newLine);
  newLine = document.querySelector('#line-' + count);
  let col1 = document.createElement('td');
    let select = document.createElement('select');
  select.id = 'drop' + count;
  select.dataset.line = count;
  select.addEventListener('change', function(event){
    let line = event.target.dataset.line;
    document.querySelector('#line-'+line+' input').value = event.target.value;
  })
  for(let i=0; i<3; i++){
    let option = document.createElement('option');
    option.value = i;
    option.innerText = 'option ' + i;
    select.appendChild(option);
  }
    col1.appendChild(select);
  let col2 = document.createElement('td');
  let textBox = document.createElement('input');
  textBox.id = 'textBox'+count;
  textBox.name = 'textBox'+count;
  col2.appendChild(textBox);
  let col3 = document.createElement('td');
  let newDelBtn = document.createElement('button');
  newDelBtn.className = "del-btn";
  newDelBtn.dataset.line = count;
  newDelBtn.innerText = "Delete";
  newDelBtn.addEventListener('click', function(event){
    let line = event.target.dataset.line;
    let lineToRemove = newLine;
    lineToRemove.remove();
  });
  col3.appendChild(newDelBtn);

    newLine.appendChild(col1);
    newLine.appendChild(col2);
    newLine.appendChild(col3);
  tableBody.appendChild(newLine);
});

Answer 2

我没有看到添加行的触发环元素"#addrow"。你能更新小提琴以包含这个按钮吗？

Answer 3

所有保修输入字段的 id 都相同，即"txtbox"。您可以使用计数器变量为所有保修字段提供单独的 ID。