Javascript 根据用户选择的内容从数据库获取数据

我是后端和PHP的新手。我试图从我的数据库中提取数据到一个输入字段，这取决于用户从下拉菜单中选择的内容。我在下拉菜单中有从数据库中获取的值。如果用户单击下拉列表中的某个元素，则其来自DB的数据应显示在输入字段中。 另一个问题，我应该为此编写一个新的php页面吗？或者这会发生在同一个html页面上吗？。 一个小的代码示例将非常有用，谢谢：

<div class="sidenav">
  <button class="dropdown-btn">Dropdown 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">value 1 from db </a>
    <a href="#">value 2 from db</a>
    <a href="#">value 3 from db</a>
  </div>
</div>

<form name="f" action="" method="">
  <div class="main">
    <table>
      <tr>
        <th colspan="2"></th>
      </tr>
      <tr>
        <td style="border-bottom: 0;"> Name </td>
        <td style="border-bottom: 0;"> <input type="text" name="Name" value=""> </td>
      </tr>
      <tr>
        <td style="border-bottom: 0;"> Adress </td>
        <td style="border-bottom: 0;"> <input type="text" name="Adress" value=""> </td>
      </tr>
      <tr>
        <td style="border-bottom: 0;"> ZIP </td>
        <td style="border-bottom: 0;"> <input type="text" name="ZIP" value=""> </td>
      </tr>
    </table>
  </div>
</form>

和一个用于下拉菜单的小javascript代码

/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}

下面是工作代码的现场演示

---

非常感谢

如果您想使用Ajax，我建议您可以通过以下帖子了解如何使用：

如果希望只使用PHP，可以将页面和变量重新加载到URL，并使用$\u GET在PHP中检索它们

---

在此处查找更多信息：

学习一些关于使用ajax和php的教程。@charlietfl这不能仅使用php完成吗？如果您想重新加载页面，可以。在href url中使用查询字符串并读取$\u GET值以填充服务器端的输入

/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}