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

Posted

技术标签:

【中文标题】在 JavaScript 中使用 PHP 回显选项生成的选择选项【英文标题】：Using PHP echoed options in JavaScript generated select options 【发布时间】：2021-04-10 10:48:52 【问题描述】：

我在做什么？

我正在制作一个事务保存应用程序，它可以选择批量添加事务。它是一种里面有一张桌子的表格。表格的每一行代表一个事务，每个单元格都有一个输入字段。有一个删除行的选项和一个添加行的选项。

问题

我有两个问题：

    添加行时，如何将原始选项用于选择，然后将它们添加到新选择中。 删除一行时，将所有其他输入的name 属性1 向下移动。

代码

代码尝试解决迄今为止的第一个问题

<!-- 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>
tdwidth: 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 -->

第二个问题

我不知道从哪里开始！

注释

JQuery 版本：3.5.1

PHP：工作 - 确认

获取选项值：工作 - 确认（使用 console.log()）

有什么问题吗？

谢谢，我希望我提供的已经足够了！

【问题讨论】：

你能澄清你的问题吗？您究竟在哪里卡住了？我认为首先关注第一个问题，解决它，然后在您了解第一个问题的所有内容后开始处理第二个问题会更容易 @NicoHaase 好的......这是有道理的。我想从第一个问题开始，因为它更关键。你能帮助我吗？问题是我的代码到目前为止我不能和任何行，所以我不知道我的代码是否有效。之前（在我添加选项/选择事物之前）我可以添加行！现在有什么问题？ 这取决于第一句话：请澄清你的问题。 【参考方案1】：

这对 jQuery .clone() 来说是一项不错的工作。

所以基本上，在页面加载时，您“克隆”该行并将其存储在一个变量中......然后在#add 单击，再次克隆它以将其附加到表中。

我创建了一个rowNum 函数来循环所有行并对它们进行编号。在添加和删除时调用该函数。

显然，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>

【讨论】：

以上是关于在 JavaScript 中使用 PHP 回显选项生成的选择选项的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Laravel 在 Javascript 中使用 PHP 变量？

jQuery不适用于通过PHP回显的元素

记录php日志

在php循环中写入javascript数组

PHP 回显与 PHP 短回显标签

vue+elementUi实现select标签选项带图片，且选中回显图片