对于每个 JSON 并呈现以选择 - javascript

Question

我在调用 ajax 成功后返回数据，并尝试将尚未在 html 中定义的选择呈现到其中。I正在渲染选择，当按钮单击然后附加到表正文之前。

这是我的代码：

获取库存

function getInventories(store_id){
        return $.ajax({
             url: '{{ url("api/v1/inventory-item/") }}/'+store_id,
             type: "GET"
          });
      }

按钮

$('#add_manually').click(function(){
      var store_id = $('#store_id').val();
      var data = getInventories(store_id);
      var $select = $('#select_invetory');
      var html = '<tr>';
          html += '<td></td>';
          html += `<td>
                      <select id="select_inventory" class="form-control"></select>
                            </td>`;
         html += '<td>'+ $('#select_toko option:selected').text() +'</td>';
         html += '<td></td>';
         html += '<td><input type="text" name="actual_stock" class="form-control" placeholder="Input Stock Opname"/></td>';
         html += '<td></td>';
         html += '<td></td>';
         html += '<td></td>';
         html += '</tr>';
         $('#table-stock-opname tbody').prepend(html);
         data.success(function(data){
              data.forEach(element => {
                   $select.append('<option value="'+element.id+'"> '+element.name+'</option>');
               });
            })
        });

我的代码中没有任何错误，并且显示数据响应，但没有附加到选择选项。 知道吗？

Answer 1

你现在怎么做，这行执行的位置，var $select = $('#select_inventory'); ，将不起作用，因为此时#select_inventory元素尚未添加到 DOM 中。

您的 for-each 循环将需要这个

data.forEach(element => {
    $('#select_inventory').append('<option value="'+element.id+'"> '+element.name+'</option>');
});

或者，您必须将语句移动到 DOM 之后var $select = $('#select_inventory');表。

还有一个错别字，一个缺失的n #select_invetory

---

另一种可能的解决方案是简单地将option直接插入select，就像这样

$('#add_manually').click(function(){
    var store_id = $('#store_id').val();
    var data = getInventories(store_id);
    var html = '<tr>';
    html += '<td></td>';
    html += '<td><select id="select_inventory" class="form-control">';
    data.forEach(element => {
        html += '<option value="' + element.id + '"> ' + element.name + '</option>';
    });
    html += '</select></td>';
    html += '<td>'+ $('#select_toko option:selected').text() +'</td>';
    html += '<td></td>';
    html += '<td><input type="text" name="actual_stock" class="form-control" placeholder="Input Stock Opname"/></td>';
    html += '<td></td>';
    html += '<td></td>';
    html += '<td></td>';
    html += '</tr>';
    $('#table-stock-opname tbody').prepend(html);
});