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

Question

我有一张发票，我想添加许多项目。我有一行有一个选择和两个输入字段。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>

Answer 1

看起来数据类型混淆了。您正在使用document.createElement('select')创建select元素，该元素返回HTMLSelectElement，然后尝试将其用作String。以下是您真正的问题：

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

为了解决这个问题，你必须将select转换为一个HTML字符串，试试这个

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