时间戳

首页 > 解决方案 > 使用可点击链接填充选择框

javascript - 使用可点击链接填充选择框

问题描述

我有一个我正在尝试完成的 PHP、JS、AJAX 应用程序。我有一个从服务器端文件夹中的文件填充的选择框。工作正常，但我试图使选择框选项可单击或悬停。更好的解决方案可能是使用 AJAX 联系一个 PHP 小页面，该页面提供 JSON 格式的文件列表以返回给 JavaScript，并在由悬停侦听器触发时运行此 AJAX 我不知道足够的 php 语法让它工作并尝试了许多方法（其中一种，但有不同的变体），最新的方法在评论中。理想情况下，我还希望它仅按文件名填充，格式为年-月-日，按降序排列。这是我的代码。非常感谢任何帮助。

尝试了评论中的内容和许多变体。

<?php
$files = scandir('upload/');
sort($files);
echo "<select>";
foreach($files as $file){
   //echo'<a href="upload/'.$file.'">'.$file.'</a>'";
   echo "<option value=' $file'> $file </option>";
}
echo "</select>";
?>

对于任何有兴趣的人来说，这一切都在起作用。我对正确/接受的答案做了很多更改。代码如下：

css（我希望下拉按钮看起来像标准/默认按钮，因此删除了 css）：

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ECF0F1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  white-space: nowrap;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

php、jquery 和 ajax：

<div class="dropdown">
  <button class="dropbtn" id="file-browser">Latest Timesheet</button>
  <div class="dropdown-content" id="file-list">

<?php
  $files = array_slice(scandir('upload/'), 2);
  rsort($files);
  foreach ($files as $file) {
    $file = pathinfo($file)['filename'];
     echo "<a href='upload/$file'>$file</a>";
}  
?>
</div>
</div>

<script>
    $("#file-browser").hover(
  function (e) {
  $.ajax({
    url: "my_dropdown_data.php",
    dataType: "json",    
    success: function(response) {    
      $("#file-list").html(""); //Clear current file list
      response.forEach(
        function(file) {
           $("#file-list").append("<a href='upload/" + file + "'>" + file.substr(0, file.length - 4) + "</a>");
        }
      );
    },
    error: function(response) {
      console.log(response);
    }
    })
  }
);
</script>

外部 php 文件（my_dropdown_data.php）：

<?php
  $files = array_slice(scandir('upload/'), 2);
  rsort($files);
  echo json_encode($files);
?>

标签： javascriptphpajaxdrop-down-menuserver-side

解决方案

从 w3schools 的指南以及您自己的代码中构建下拉菜单。这是使用<select>菜单的替代方法，并且必须构建一些 JavaScript 以使其与下拉菜单类似，这将是不好的做法。

！！！ 首先要注意的是，这是直接取自上传目录中存储的文件名。如果您没有正确清理/随机化正在上传的文件名，用户可能会转义此 HTML 并设置 XSS 攻击 - 请注意上传时的文件名以避免这种情况。

您将首先设置基本 HTML 结构，这将用于异步、重新加载下拉菜单：

<div class="dropdown">
  <button class="dropbtn" id="file-browser">Dropdown Menu ACTIVATE</button>
  <div class="dropdown-content" id="file-list">
  </div>
</div>

现在您将填写静态数据，而不是重新加载下拉菜单：

<div class="dropdown">
  <button class="dropbtn">Dropdown Menu ACTIVATE</button>
  <div class="dropdown-content">

  <?php
  $files = scandir('upload/');
  sort($files);
  foreach ($files as $file)
     echo "<a href='upload/$file'>$file</a>";
  ?>

  </div>
</div>

最后，你有你的 CSS，直接来自 w3schools - 这些是构建的重要部分：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

现在要让它动态加载数据，您不必一开始就加载数据，因为它只会被覆盖，但我们确实需要一个监听器来监听按钮何时悬停（并且应该显示下拉菜单）。这将通过 jQuery 来完成.hover()：

$("#file-browser").hover(
  function {

  }
);

现在我们要加载数据，我们将使用 AJAX；更具体地说 jQuery 的.ajax()：

$("#file-browser").hover(
  function {
    url: "my_dropdown_data.php",
    dataType: "json",
    success: function(response) {

    },
    error: function(response) {
      console.log(response);
    }
  }
);

数据将my_dropdown_data.php来自上面的文件，这将与静态数据下拉列表中的代码基本相同，除了以 JSON 形式回显：

  <?php
  $files = scandir('upload/');
  sort($files);
  echo json_encode($files);
  ?>

最后一块拼图将是所有 JS -hover listener，AJAX 调用 - 处理数据以列出我们 PHP 中的 JSON 文件列表：

$("#file-browser").hover(
  function {
    url: "my_dropdown_data.php",
    dataType: "json",
    success: function(response) {
      $("#file-list").html(""); //Clear current file list
      response.forEach(
        function(file) {
          $("#file-list").append("<a href='upload/" + file + "'>" + file + "</a>");
        }
      );
    },
    error: function(response) {
      console.log(response);
    }
  }
);

瞧，你有你的下拉菜单，当悬停在数据上时，将从 PHP 文件加载并使用文件链接填充下拉菜单。

推荐阅读