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

Returning multidimensional array key from selected option in PHP

我是 PHP 的新手,我正在尝试在 table 中显示多维数组的内容,它位于 select 选项列表中select由用户编辑。我想要做的是将 selected 选项的数组键返回到一个新变量中,例如 $keyref = key($myarray); 以便我可以使用该键在 table 中显示但我不知道如何。我是否在 <select> 列表中使用 javascript 函数,例如 onChange=function()

代码如下:

<?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>";
?>


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

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

从 return 到 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).

时,该值可以在 $_GET["shirtlist"] 中访问

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

我还向select添加了一个selected属性,以便select显示的文章(当迭代索引与请求的shirtlist值相同时).

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

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]);
});

这将完成工作。

在select框变化事件中,它会将add/replace数据转化为table。