使用 PHP 在 JavaScript 生成的 select 选项中回显选项

Question

WHAT AM I DOING?我在做什么？

I am making a transaction keeping application that has an option to bulk add transactions.我正在制作一个事务保存应用程序，它可以选择批量添加事务。 It is a form which has a table inside.它是一种里面有一张桌子的表格。 Each row of the table stands for one transaction with each cell having an input field.表格的每一行代表一个事务，每个单元格都有一个输入字段。 There is an option to remove a row and one to add a row.有一个删除行的选项和一个添加行的选项。

Problems问题

I have two problems:我有两个问题：

When adding a row, how do I take original options for the select and then add them to the new selects.添加行时，如何获取 select 的原始选项，然后将它们添加到新选择中。
When deleting a row, shift all of the other input's name attribute 1 down.删除一行时，将所有其他输入的name属性 1 向下移动。

Code代码

Code Tried For The First Problem So Far迄今为止尝试的第一个问题的代码

<!-- HTML START -->

<?php
$conn = new mysqli('localhost', 'admin', 'myphpadmin', 'tests');
$merch = $conn->query("Select Name From options Where `Type` = 'Merchant'");
$type = $conn->query("Select Name From options Where `Type` = 'Type'");
$source = $conn->query("Select Name From options Where `Type` = 'Source'")
?>


<!DOCTYPE html>
<html>
<head>
<title>Add In Bulk</title>
<link rel='stylesheet' href='styles.css' type='text/css'>
<style>
td{width: calc(100% / 6);
overflow-x: hidden}
</style>
</head>
<body>
<h1>Add In Bulk</h1>
<form action='bulk.php' method='post'>
<table>
<tr>
<th>Description</th>
<th>Date</th>
<th>Amount</th>
<th>Merchant</th>
<th>Type</th>
<th>Source</th>
<th>Delete</th>
</tr>
<tr>
<td><input type='text' name='des1' required></td>
<td><input type='data' name='d1' required></td>
<td><input type='number' step='0.01' min='0' name='a1' required></td>
<td><select name='m1' required id='m'>
<option value='' disable selected>Select One</option>
<?php
while($row = mysqli_fetch_assoc($merch)){
foreach($row as $value){
echo "<option value='$value'>$value</option>";}}
?>
</select>
</td>

<td><select name='t1' required id='t'>
<option value='' disable selected>Select One</option>
<?php
while($row = mysqli_fetch_assoc($type)){
foreach($row as $value){
echo "<option value='$value'>$value</option>";}}
?>
</select>
</td>

<td><select name='s1' required id='s'>
<option value='' disable selected>Select One</option>
<?php
while($row = mysqli_fetch_assoc($source)){
foreach($row as $value){
echo "<option value='$value'>$value</option>";}}
?>
</select>
</td>

<td><button class='del'>Delete</td></tr>
</table>
</form>
<button id='add'>Add</button>
<script src='..\..\jquery.js'></script>
<script src='bulk.js'>
</script>
</body>
</html>

<!-- HTML END -->

<!-- BULK.js START -->

/*==================Get The Option Values======================*/

var merchants = []
var type = []
var source = []

$("#m option").each(function() {merchants.push(this.value);});
$("#s option").each(function() {source.push(this.value);});
$("#t option").each(function() {type.push(this.value);});


/*==================ForEach Function======================*/

function addoptions(item){return "<option value='" + item + "'>" + item + "</option>";}

/*==================Declare Variables======================*/

var table = document.getElementsByTagName('table');
var tr = document.getElementsByTagName('tr');
var fun = `
<tr>
<td><input type='text' name='des` + ((tr.lenght) + 1).toString() + `' required></td>
<td><input type='data' name='d` + ((tr.lenght) + 1).toString() + `' required></td>
<td><input type='number' step='0.01' min='0' name='a` + ((tr.lenght) + 1).toString() + `1' required></td>
<td><select name='m` + ((tr.lenght) + 1).toString() + `' required id='m'>
<option value='' disable selected>Select One</option>` + merchants.forEach(addoptions); + `
</select>
</td>

<td><select name='t` + ((tr.lenght) + 1).toString() + `' required id='t'>
<option value='' disable selected>Select One</option>` + type.forEach(addoptions); + `
</select>
</td>

<td><select name='s` + ((tr.lenght) + 1).toString() + `' required id='s'>
<option value='' disable selected>Select One</option>` + source.forEach(addoptions); + `
</select>
</td>
<td><button class='del'>Delete</button></td>`;

/*==================Delete Rows======================*/


$(document).on("click", ".del" , function(){
   $(this).closest('tr').remove();
/*if(tr.lenght == 0){table.remove;}  Why Does This Not Work? */
})

/*==============Add Rows==========================*/

//Adding Rows
$('#add').click(function(e){
$(table).push(fun)})

<!-- BULK.js END -->

Second Problem第二个问题

~~I have no idea where to begin!~~ ~~我不知道从哪里开始！~~

Notes笔记

JQuery Version: 3.5.1 JQuery 版本：3.5.1

PHP: Working - Confirmed PHP：工作 - 确认

Getting Option Values: Working - Confirmed (Using console.log() )获取选项值：工作 - 确认（使用console.log() ）

Any Questions For Me?对我有什么问题吗？

Thanks and I hope what I have provided is enough!谢谢，我希望我提供的已经足够了！

Answer 1

That is a nice job for jQuery .clone() .这对 jQuery .clone()来说是一项不错的工作。

So basically, on page load, you "clone" the row and store it in a variable... Then on #add click, clone that again to append it to the table.所以基本上，在页面加载时，您“克隆”该行并将其存储在一个变量中......然后在#add单击时，再次将其克隆到 append 到表中。

I made a rowNum function to loop all row and number them.我做了一个rowNum function 来循环所有行并对它们进行编号。 Call that function on add and on delete.在添加和删除时调用 function。

Obviously, the PHP lines do not work here.显然，PHP 线在这里不起作用。 ;) ;)

 /* Delete Rows */ $(document).on("click", ".del", function() { $(this).closest('tr').remove(); rowNum(); }) // Keeping a clone safe (before any changes) let rowClone = $(".clonable").clone(); /* Add Rows */ $('#add').click(function(e) { $("table").append(rowClone.clone().removeClass("clonable")); rowNum(); }) /* Row numbering */ function rowNum() { $("table tbody tr").each(function(index, row) { // Inputs $(row).find("input").eq(0).attr("name", "des" + (index + 1)); $(row).find("input").eq(1).attr("name", "d" + (index + 1)); $(row).find("input").eq(2).attr("name", "a" + (index + 1)); // Selects $(row).find("select").eq(0).attr("name", "m" + (index + 1)); $(row).find("select").eq(1).attr("name", "t" + (index + 1)); $(row).find("select").eq(2).attr("name", "s" + (index + 1)); }) }

 form { margin-top: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Add In Bulk</h1> <button id="add">Add a row</button> <form action='bulk.php' method='post'> <table> <thead> <tr> <th>Description</th> <th>Date</th> <th>Amount</th> <th>Merchant</th> <th>Type</th> <th>Source</th> <th>Delete</th> </tr> </thead> <tbody> <tr class="clonable"> <td><input type='text' name='des1' required></td> <td><input type='data' name='d1' required></td> <td><input type='number' step='0.01' min='0' name='a1' required></td> <td> <select name='m1' required id='m'> <option value='' disable selected>Select One</option> <?php while($row = mysqli_fetch_assoc($merch)){ foreach($row as $value){ echo "<option value='$value'>$value</option>";}}?> </select> </td> <td> <select name='t1' required id='t'> <option value='' disable selected>Select One</option> <?php while($row = mysqli_fetch_assoc($type)){ foreach($row as $value){ echo "<option value='$value'>$value</option>";}}?> </select> </td> <td> <select name='s1' required id='s'> <option value='' disable selected>Select One</option> <?php while($row = mysqli_fetch_assoc($source)){ foreach($row as $value){ echo "<option value='$value'>$value</option>";}}?> </select> </td> <td><button class='del'>Delete</td> </tr> </tbody> </table> </form>

使用 PHP 在 JavaScript 生成的 select 选项中回显选项

问题描述

WHAT AM I DOING?我在做什么？

Problems问题

Code代码

1 个解决方案

解决方案1
0 已采纳 2021-01-04 17:06:35

使用 PHP 在 JavaScript 生成的 select 选项中回显选项

问题描述

WHAT AM I DOING?我在做什么？

Problems问题

Code代码

1 个解决方案

解决方案1 0 已采纳 2021-01-04 17:06:35

解决方案1
0 已采纳 2021-01-04 17:06:35