创建一个下拉列表以查看图像，然后选择所需的图像 - Create a drop down list to view images, then select the wanted image

Create a drop down list to view images, then select the wanted image

我的图像位于以下文件夹中/文件/图像/产品。我已尝试按如下方式选择我的图像文件夹，并希望从列表中选择一个。

<select name="image1">
      <option value="" selected="selected"></option>
  <?php 
     $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = $filename;
    }
    sort($files);
       echo "<option value=" . $filename . "'>".$filename."</option>";
?>
</select>

这就是我得到的，但是没有显示列表，所以无法选择任何内容。欢迎提供任何帮助

option元素中value属性缺少开头引号。

视觉：

       echo "<option value='" . $filename . "'>".$filename."</option>";

您的代码看起来像value="，而不是value='"，因此它输出的内容如下：

<option value=path/to/my/file'>path/to/my/file</option>

这不是有效的HTML。

正如一位通讯员指出的那样，你的回声不在循环中，所以它只会打印一个选项，给出最后一个文件名。你想要这样的东西：

foreach($files as $filename) {
    echo "<option value=" . $filename . "'>".$filename."</option>";
}

此外，为了安全起见，您应该逃离所有打印的内容，例如使用htmlentities：

while (false !== ($filename = readdir($dh))) {
    $files[] = htmlentities($filename);
}

总之，你的代码可能是这样的：

<select name="image1">
      <option value="" selected="selected"></option>
  <?php 
    $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = htmlentities($filename);
    }
    sort($files);
    foreach($files as $filename) {
       echo "<option value='" . $filename . "'>".$filename."</option>";
    }
?>
</select>

<select id="mySelect" name="image1">
  <option value="" selected="selected"></option>
   <?php 
       $dir = "../files/images/product";//your path
       $dh  = opendir($dir);
       while (false !== ($filename = readdir($dh))) {
           $files[] = $filename;
           echo "<option value=" . $filename . "'>".$filename."</option>";
        }
      sort($files);

?>

   <script> 
     $('#mySelect').on('change', function(e) {
        var address = e.val();
        alert(<?php $dir; ?>+'/'+address);
        });
   </script>

这只适用于alert，但您可以找到如何使用jQuery或其他东西附加一些html元素。