将 Javascript 转换为 PHP 变量

Question

我正在寻找一些帮助我试图获得在第一个下拉列表中选择的值 (id="select1") 在经过一些研究后不提交表单我已经能够获得第一个下拉列表的值和 output带有以下警报。

 <select name="select1" id="select1" class="form-control" required="required" 
 onchange="getValue(this)">

 <script>
 function getValue(obj){
 alert(obj.value);
 }
 </script>

我正在努力做的是将它存储为 php 变量，我可以在第二个下拉列表中使用它（id="select2），这是我的代码，任何帮助我指向正确方向的帮助将不胜感激。

 <div class="form-group">
 <label>Select 1</label>
 <br>
 <select name="select1" id="select1" class="form-control" required="required" 
 onchange="getValue(this)">
 <option disabled selected>-- Select 1 --</option>
 <?php
 $records = mysqli_query($conn, "SELECT name1 From table_001");   

 while($row = mysqli_fetch_array($records))
 {
 echo "<option value='". $row['name1'] ."'>" .$row['name1'] ."</option>";  
 }  
  ?>
  
  </select>
 </div>
 
 <script>
 function getValue(obj){
   return(obj.value) ;
 }
 </script>
 
 <?php
 $phpvar = "OUTPUT OF THE ABOVE JS";
 ?>
 
 <div class="form-group">
 <label>Select 2</label>
 <br>
 <select name="select2" id="select2" class="form-control" required="required">
 <option disabled selected>-- Select 2 --</option>
 <?php
 $records1 = mysqli_query($conn, "SELECT name2 From table_002 where name1 = '$phpvar'");   
      
 while($row = mysqli_fetch_array($records1))
 {
 echo "<option value='". $row['name2'] ."'>" .$row['name2'] ."</option>";  
 }  
 ?>
 </select>
 </div>

Answer 1

如果我正确理解了您的问题，您不能只在 php 中“存储”一个变量。 PHP是服务器端，JS是客户端。 在它们之间交换数据的唯一方法是 http 请求-响应对。 （我们不是在谈论 websockets 等）

您可以通过两种方式执行 http 请求：

1. 表格提交。 当您提交表单时，该表单的数据将通过 GET 或 POST 方法发送到服务器。 然后服务器执行一些操作并发送响应。 然后刷新页面（或者您被重定向到另一个页面等）。
2. AJAX 请求。 原理是一样的，只是你不离开实际页面（没有页面刷新或重定向）。 JS 代码正在执行请求，然后当响应来自服务器时它会接收响应事件，然后您可以使用此响应做任何您想做的事情（将其插入页面，更改 select 值等）。

表单提交方式

我不认为这是你的情况，因为你首先需要提交第一个表单，然后页面将被刷新，新页面将在第一个表单被清除但从 php 插入所需的值后返回形式

AJAX方式

这是您的首选解决方案。 您可以使用XMLHttpRequest （旧方式）或fetch （现代方式）发出 ajax 请求。 这是浏览器中的两种原生方式（也存在很多库，例如 jquery.ajax()，它们大多是上述这两种方法之上的包装器）。

这是使用 fetch API 的基本示例，您可以将其放在第一个 select 的 onChange 事件处理程序中（：

fetch('./some_address.php')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // your server-side script may return a complex (or not :) json object or just a plain text, read the documentation for your case
    return response.json(); // or return response.text();
  })
  .then((data) => {
    // do whatever you need with your response from the server, for example set the value for your second select
  });