无法在 html table 的下拉列表中显示 JSON 数据

Question

我有一个包含 4 行的 HTML table，其中禁用了订单 ID 和产品评论列，用户可以在其他列中输入数据并提交。当用户输入数据并单击提交按钮时，我得到一个 JSON 对象作为 return 值，我正在迭代并显示在 table 中。

我这里有两个障碍需要帮助。

当用户点击提交按钮时，submitData() 函数被调用，我得到 jsonData 被迭代并显示在 table 中，但我的代码 Product1、Product2 列是下拉列表，不显示数据。
另一个问题是当用户单击提交按钮并获取数据并显示在 table 中时，我想制作 "Product Comments" 列作为 editable（已启用）并且所有其他列都处于禁用模式。

代码演示：https://plnkr.co/edit/CEAYKI1SGuobosye1Pqk?p=preview

下面是我试过的示例代码：

//populate dropdown with the value

function populateSelect() {
  var ids = [{
    "pid": "laptop",
    "des": "laptop"
  }, {
    "pid": "Mobile",
    "des": "Mobile"
  }, {
    "pid": "IPAD mini.",
    "des": "IPAD mini."
  }]
  var productDropdown1 = $(".product1");
  var productDropdown2 = $(".product2");
  $.each(ids, function(index, value) {
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
    $("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
  });

  $("select").change(function() {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    var descValue = $('input[name="description"]', row).val();
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, descValue);
  });

  $('input[name="description"]').on('input', function(e) {
    var row = $(this).closest("tr");
    var product1_drop = $('.product1', row).val();
    var product2_drop = $('.product2', row).val();
    console.log("-inut -product1_drop----- " + product1_drop);
    if (product1_drop && product2_drop)
      validate(product1_drop, product2_drop, $(this).val());
  });
}

function validate(prod1, prod2, desc) {
  if (desc && prod1 === prod2) {
    alert('Product1 and Product2 cannot have same value');
  }
}

function submitData() {
  var flag = true;
  if (flag) {
    //after getting the values from backend hide the table1 and show table2
    var jsonData = [{
        "oid": "1023",
        "Product1": "laptop",
        "description": "Silver color",
        "product2": "IPAD Mini",
        "comments": "user comments row1",
        "productComments": "Product comments row1"
      },
      {
        "oid": "1024",
        "Product1": "Mobile",
        "description": "Samsung",
        "product2": "IPAD Mini",
        "comments": "user comments row2",
        "productComments": "product comments row2"
      }
    ];

    //iterate and show the jsonData in the table2 when user click on submit button
    $.each(jsonData, function(key, val) {
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(0) input').val(val.oid);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(1) select').val(val.product1);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(2) input').val(val.description);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(3) select').val(val.product2);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(4) input').val(val.comments);
      $('#productTable tr:eq(' + [key + 1] + ') td:eq(5) input').val(val.productComments);
    });
  }
}

$(document).ready(function() {
  populateSelect();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table id="productTable" border="1">

  <tr>
    <th>Order ID</th>
    <th>Product1</th>
    <th>Description</th>
    <th>Product2</th>
    <th>Comments</th>
    <th>Product Comments</th>
  </tr>

  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum1" disabled></td>
    <td>
      <select class="product1" id="prod1">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2" id="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum2" disabled></td>
    <td>
      <select class="product1" id="prod2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum3" disabled></td>
    <td>
      <select class="product1" id="prod3">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
  <tr>
    <td><input type="text" name="orderNum" value="" id="orderNum4" disabled></td>
    <td>
      <select class="product1" id="prod4">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="description" value="">
    </td>
    <td>
      <select class="product2">
        <option value=""></option>
      </select>
    </td>
    <td>
      <input type="text" name="Comments" value="">
    </td>
    <td>
      <input type="text" name="productComments" value="" disabled>
    </td>
  </tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
</body>

</html>

---已编辑---- 我面临的另一个问题是，如果当用户单击提交按钮时我得到的 jsonData 有任何空值，我想在该行中显示数据，但用红色显示该行并且不想禁用字段，以便用户可以再次输入数据..

示例：

   var jsonData = [{
          "oid": "1023", 
          "product1": "laptop",  
          "description": "Silver color",
          "product2": "Mobile", 
          "comments":"user comments row1",
          "productComments":"Product comments row1"
        },
        {
          "oid": null,
          "product1": "Mobile", 
          "description": "Samsung",
          "product2": "laptop",
          "comments":"user comments row2",
          "productComments":"product comments row2"
        } 
      ];

在上面的 jsonData 中，第二行的值 oid 为空，所以我想显示第二行以红色突出显示并且不禁用字段。 reset/clear 用户在单击提交按钮之前输入的所有内容。

我用来重置用户在点击提交按钮之前输入的值的代码：

   $('#productTable input[type="text"]').val('');
   $('.product1').val('');

更新了插件：https://plnkr.co/edit/aEEFFSndWOpbGHp43bQT?p=preview

Answer 1

对于 product1，它工作正常。对于product2，只是语法错误 "product2": "IPAD Mini" what should be "product2": "IPAD Mini." with dot.

要更改字段的启用：

$('#productTable input, #productTable select').attr("disabled", "disabled");

$('#productTable tr ').each(function(){
    $('td:eq(2) input', this).removeAttr("disabled");
});

无法在 html table 的下拉列表中显示 JSON 数据

Unable to display the JSON data in the dropdown list in html table

html

javascript

jquery

json

html-select