基于select的option选择值使用for/do while循环展示对应图片的实现咨询

核心逻辑说明 #

• 表单提交后先获取下拉框选中的取值
• 加条件判断，仅当选中值为green时执行循环渲染逻辑
• 循环输出5张图片的img标签

完整代码示例 #

1. 前端表单代码

<form method="post" action="">
  <select name="operator" id="operator">
    <option value="green">green</option>
    <option value="purple">purple</option>
    <option value="orange">Orange</option>
  </select>
  <br><br>
  <button type="submit" name="check">Check</button>
</form>

2. PHP后端处理代码

<?php
// 判断是否提交了表单
if (isset($_POST['check'])) {
  // 获取下拉框选中值
  $selected_option = $_POST['operator'];
  // 条件判断：只有选中green时才渲染图片
  if ($selected_option == 'green') {
    // for循环输出5张图片
    for ($i = 0; $i < 5; $i++) {
      // 这里替换为实际图片地址即可
      $img_url = "你的图片存储路径/{$i}.jpg";
      echo "<img src='{$img_url}' alt='展示图片{$i}' style='width:200px; margin:10px;' />";
    }

    /* 若要使用do while实现，可替换为以下代码
    $i = 0;
    do {
      $img_url = "你的图片存储路径/{$i}.jpg";
      echo "<img src='{$img_url}' alt='展示图片{$i}' style='width:200px; margin:10px;' />";
      $i++;
    } while ($i < 5);
    */
  }
}
?>

注意事项 #

• 原参考代码给option加name属性是错误写法，下拉选项的取值要存到value属性中，name属性仅需绑定在select标签上即可
• 原示例的for循环条件写的是$i <=5，会循环6次，改成$i <5才能刚好输出5张图片
• img标签的src属性记得替换为实际要展示的图片地址

内容的提问来源于stack exchange，提问作者Muhamad Bahri