从 PHP 中的选定选项返回多维数组键

Question

我是 PHP 的新手，我试图在一个表中显示多维数组的内容，该表位于用户选择的选择选项列表中。我想要做的是将所选选项的数组键返回到一个新变量中，例如$keyref = key($myarray);，这样我就可以使用该键在表格内显示，但我不知道如何。我是否在<select> 列表中使用了诸如onChange=function() 之类的javascript 函数？

代码如下：

<?php
$tshirt = array (
  array("T-shirt A",15,"XS"),
  array("T-shirt B",20,"S"),
  array("T-shirt C",25,"M")
  ); //array("t-shirt type", price, "size")

 $keyRef = 0; //the variable that will contain the selected array key
 echo "<select id='shirtlist'>";
 foreach($tshirt as $value){
   echo "<option value='$value)'>$value[0]</option>";
  }
  echo "</select>";

echo "<p>Details of T-shirt:</p>";
  echo "<table>";
  echo "<tr>";
  echo "<th>T-shirt Type</th>";
  echo "<th>Price</th>";
  echo "<th>Size</th>";
  echo "</tr>";
  echo "<tr>";
  echo "<td>".$tshirt[$keyRef][0]."</td>";
  echo "<td>".$tshirt[$keyRef][1]."</td>";
  echo "<td>".$tshirt[$keyRef][2]."</td>";
  echo "</tr>";
  echo "</table>";
?>

表格设法显示第一个数组的数据，但是当我选择其他选项时没有任何反应。至于尝试 javascript 函数，我尝试了 json_encode($myarray) 方法，但只返回了 Array 作为字符串通知。

Answer 1

首先你要明白PHP只是在服务器端执行的，也就是说PHP代码和你在浏览器中实现的动作之间没有交互。

返回 PHP 的唯一方法是发送新请求。

根据您想要做什么以及您希望在浏览器中使用哪种工作流程，您应该在纯 PHP（每个操作必须通过客户端-服务器请求实现）或使用 javascript（直接在浏览器中执行）之间进行选择。

在纯 PHP 中，您的功能可以通过以下代码实现：

<?php
$tshirt = array (
  array("T-shirt A",15,"XS"),
  array("T-shirt B",20,"S"),
  array("T-shirt C",25,"M")
  ); //array("t-shirt type", price, "size")

 $keyRef = 0; //the variable that will contain the selected array key
 if(isset($_GET["shortlist"]) && isset($tshirt[$_GET["shirtlist"]])) {
  $keyRef = $_GET["shirtlist"];
 }

 echo "<form method='GET'>";
 echo "<select name='shirtlist'>";
 foreach($tshirt as $key => $value){
   $selected = '';
     if ($key == $keyRef) {
         $selected = 'selected';
     }
   echo "<option value='$key' $selected>".$value[0]."</option>";
  }
  echo "</select>";
  echo "<input type='submit' value='submit'/>";
  echo "</form>";

echo "<p>Details of T-shirt:</p>";
  echo "<table>";
  echo "<tr>";
  echo "<th>T-shirt Type</th>";
  echo "<th>Price</th>";
  echo "<th>Size</th>";
  echo "</tr>";
  echo "<tr>";
  echo "<td>".$tshirt[$keyRef][0]."</td>";
  echo "<td>".$tshirt[$keyRef][1]."</td>";
  echo "<td>".$tshirt[$keyRef][2]."</td>";
  echo "</tr>";
  echo "</table>";
?>

请注意，我使用全局 $_GET 从 URL 查询字符串中获取信息。当点击表单的提交按钮时，这个信息被传递给 PHP，然后使用标签的name 属性可以在其中访问 select 的值（<select name="shirtlist"> 表示在 $_GET["shirtlist"] 时可以访问该值表单的方法是GET)。

此代码需要用户执行操作以使用选择更新页面。

我还在select 中添加了selected 属性，以便选择显示的文章（当迭代索引与请求的shirtlist 值相同时）。

在这里仔细检查 if(isset($_GET["shortlist"]) && isset($tshirt[$_GET["shirtlist"]])) { 以确保所选项目在列表中，因为任何人都可以访问该URL，因此可以手动更改该值，将表单方法更改为POST 和然后使用$_POST 全局数组而不是$_GET 访问该值。

Answer 2

HTML代码：

<?php
  $tshirt = array (
    array("T-shirt A",15,"XS"),
    array("T-shirt B",20,"S"),
    array("T-shirt C",25,"M")
  ); //array("t-shirt type", price, "size")
?>

<!-- here we create a select box -->
<select class="" id="shirtlist">
  <option value="" selected>select</option>
  <!-- add the key varible into foreach loop that give the index of the value -->
  <?php foreach($tshirt as $key => $value){ ?>
    <option value="<?=$key?>"><?=$value[0]?></option>";
  <?php } ?>
</select>

<p>Details of T-shirt:</p>
<table>
  <tr>
    <th>T-shirt Type</th>
    <th>Price</th>
    <th>Size</th>
  </tr>
  <tr>
    <!-- Here we are created the empty table Data will be field after user select any option -->
    <td class="type"></td>
    <td class="price"></td>
    <td class="size"></td>
  </tr>
</table>

添加 Jquery CDN：

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Javascript/Jquery 代码：

<script type="text/javascript">
/* we we convert the PHP array into Javascript array using JSON.parse function */
var data = JSON.parse('<?=json_encode($tshirt)?>');

/*  This is the code when user change the option in select box then it will add/replace the data into table */
$('#shirtlist').change(function(e){
    var key = $(this).val();
    $('.type').text(data[key][0]);
    $('.price').text(data[key][1]);
    $('.size').text(data[key][2]);
});

这样就可以了。

在选择框更改事件时，它将数据添加/替换到表中。