[英]Populate Select Box with Clickable Links
I have a PHP, JS, AJAX app that I am trying to finish off. 我有一个PHP,JS,AJAX应用程序,我正在尝试结束。 I have a select box that populates from the files in a server-side folder.
我有一个选择框,它从服务器端文件夹中的文件填充。 Works okay but I am trying to make the select box options clickable or on hover.
可以,但是我正在尝试使选择框选项可单击或悬停。 A better solution might be to use AJAX to contact a PHP little page that provides a list of files in JSON to be given back to the JavaScript, and have this AJAX run when triggered by a hover listener I don't know enough php syntax to get it working and have tried many methods (well one, but different variations on it), the most recent is in the comments.
更好的解决方案可能是使用AJAX与PHP小页面联系,该小页面提供要返回给JavaScript的JSON文件列表,并在由悬停侦听器触发时运行此AJAX,我不了解足够的php语法来使其工作并尝试了许多方法(是一种方法,但是它有不同的变体),最近的是在注释中。 Ideally I would also like it to only populate by file name , in the format year-month-day, in descending order.
理想情况下,我还希望它仅以年-月-日格式按文件名以降序填充。 This is the code I have.
这是我的代码。 Very grateful for any assistance.
非常感谢您的协助。
Tried what is in the comments and many variations. 尝试了注释中的内容和许多变体。
<?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>";
?>
For anyone that is interested this is all working now. 对于任何对此感兴趣的人,现在都可以使用。 I made quite a few changes to the correct/accepted answer.
我对正确/可接受的答案做了很多更改。 The code is as follows:
代码如下:
The css (I wanted the drop-down button look like a standard/default button so removed css for it): 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;}
The php, jquery and ajax: 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>
The external php file (my_dropdown_data.php): 外部php文件(my_dropdown_data.php):
<?php
$files = array_slice(scandir('upload/'), 2);
rsort($files);
echo json_encode($files);
?>
Building off of the dropdown menu from the guide from w3schools as well as your own code. 从w3schools指南的下拉菜单以及您自己的代码中构建。 This is an alternative to using a
<select>
menu and having to build out a bit of JavaScript to make it work similar to a dropdown menu, which would be poor practice. 这是使用
<select>
菜单的替代方法,并且必须构建一些JavaScript才能使其类似于下拉菜单,这是较差的做法。
!!! !!! One note before anything , this is directly taking from file names stored in your uploads directory.
首先要注意的一点是,这直接取自上载目录中存储的文件名。 If you do not properly sanitize / randomize file names that are being uploaded, it's possible a user could escape this HTML and set up an XSS attack - please care for the file names on upload to avoid this.
如果您没有正确地清理/随机化正在上传的文件名,则用户可能会逃脱此HTML并设置XSS攻击-请注意上传时的文件名,以避免这种情况。
You'll first set up the base HTML structure, this is what will be used for an asynchronous, reloading dropdown menu: 首先,您将建立基本的HTML结构,这将用于异步的,重新加载的下拉菜单:
<div class="dropdown">
<button class="dropbtn" id="file-browser">Dropdown Menu ACTIVATE</button>
<div class="dropdown-content" id="file-list">
</div>
</div>
And now you'll fill in the data for a static, not reloading dropdown menu: 现在,您将为静态而不是重新加载的下拉菜单填写数据:
<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>
And finally, you have your CSS, directly from w3schools - these are the important bits to build off of: 最后,您可以直接从w3schools获得CSS-这些是建立在以下基础之上的重要信息:
.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;
}
Now to get it to load data dynamically, you don't have to load the data initially since it will just be overwritten, but we do need a listener for when the button is hovered over (and the dropdown should be shown). 现在要使其动态加载数据,您不必首先加载数据,因为它将被覆盖,但是我们确实需要一个侦听器,以了解何时将鼠标悬停在按钮上(应该显示下拉列表)。 That will be accomplished with jQuery's
.hover()
: 这将通过jQuery的
.hover()
:
$("#file-browser").hover(
function {
}
);
Now we want to load the data, which we'll do utilizing AJAX; 现在我们要加载数据,我们将使用AJAX进行加载。 more specifically jQuery's
.ajax()
: 更具体地说是jQuery的
.ajax()
:
$("#file-browser").hover(
function {
url: "my_dropdown_data.php",
dataType: "json",
success: function(response) {
},
error: function(response) {
console.log(response);
}
}
);
The data will come from the file my_dropdown_data.php
from above, and that will be essentially the same code from the static data dropdown, except echoed out as JSON: 数据将从上面的文件
my_dropdown_data.php
获得,并且与从静态数据下拉菜单中获得的代码基本上相同,只是回显为JSON:
<?php
$files = scandir('upload/');
sort($files);
echo json_encode($files);
?>
And the final piece of the puzzle will be all the JS -hover listener, AJAX call- with processing of the data to list out the JSON list of files from our PHP: 最后一个难题将是所有JS-悬停侦听器,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);
}
}
);
And voila, there you have your dropdown menu, and when hovered over the data will load from the PHP file and populate the dropdown with links to the files. 瞧,您就有了下拉菜单,将鼠标悬停在数据上时,数据将从PHP文件加载,并在下拉菜单中填充指向这些文件的链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.