OnClick 添加一行来自数据库 laravel/js 的数据答案

【问题标题】：OnClick add a row with data from database laravel/jsOnClick 添加一行来自数据库 laravel/js 的数据
【发布时间】：2021-08-18 17:51:50
【问题描述】：

我有一张发票，我想添加许多项目。我有一排有一个选择和两个输入字段。 Select 从数据库中获取数据（它获取数据库中的所有项目），输入字段用于价格和数量。

我有一个按钮添加项目，我想添加具有特定输入的另一行。我的问题在于选择，因为我不知道如何从数据库中获取数据以显示在选项中。

我正在使用 Laravel 显示第一行，而在单击按钮时，我正在尝试使用 JS 来实现它。我还想根据数量显示所选商品的价格。

<table id="items_table">...</table>

<button id="add_item">Add Item</button>

<script>
let counter = 1;
const items = {!! json_encode($items->toArray()) !!}

$('#add_item').click(function(event){
    event.preventDefault();
    counter++;
    const select = document.createElement('select')

    for(let i = 0; i< items.length; i++){
       const opt = items[i]
       const el = document.createElement('option');
       el.textContent = opt.name;
       el.value = opt.id;
       select.appendChild(el);
    }

    const newRow = jQuery(
        select +
         counter + '"/></td><td><input type="text" name="last_name' +
         counter + '"/></td></tr>');
     $('#items_table').append(newRow);
});
</script>

【问题讨论】：

请仅添加相关代码，正确缩进您的代码，并在提问前尝试使用现代代码约定 - 这真的在回答时很有帮助。
1) 日志中是否有任何错误？ 2) rendered 输出是什么样的（包括渲染的“items”变量）？ 3）你想用jQuery(select + counter + ...)做什么——这里的“选择”看起来像是一个元素，但其他一切都只是字符串连接
在你的newRow之前看起来确实缺少一些代码
不，这就是全部代码。 1）不，我没有收到任何错误，但此代码不起作用。 2)Items 返回一个对象数组，其中包含来自数据库的数据 3) 我只是想用 Select（来自 items 变量的数据）和两个输入字段创建一个新行
我的回答有帮助吗？这仍然是一个问题吗？ - 请注意，我编辑了答案

标签： javascript laravel

【解决方案1】：

看起来您的数据类型混淆了。您正在使用 document.createElement('select') 创建选择元素 - 它返回一个 HTMLSelectElement，然后您尝试使用它，就好像它是一个字符串一样。这是您真正的问题：

const select = document.createElement('select')
console.log(select + "<br>");
// This prints out "[object HTMLSelectElement]<br>"

要解决这个问题，你必须将选择转换为 HTML 字符串，试试这样的

const select = document.createElement('select')
select.innerText = "Test";
const selectAsHTML = select.outerHTML;
console.log(selectAsHTML + "<br>");

【讨论】：