[英]Populate Select Box with Clickable Links
我有一個PHP,JS,AJAX應用程序,我正在嘗試結束。 我有一個選擇框,它從服務器端文件夾中的文件填充。 可以,但是我正在嘗試使選擇框選項可單擊或懸停。 更好的解決方案可能是使用AJAX與PHP小頁面聯系,該小頁面提供要返回給JavaScript的JSON文件列表,並在由懸停偵聽器觸發時運行此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);
?>
從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>
最后,您可以直接從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;
}
現在要使其動態加載數據,您不必首先加載數據,因為它將被覆蓋,但是我們確實需要一個偵聽器,以了解何時將鼠標懸停在按鈕上(應該顯示下拉列表)。 這將通過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-懸停偵聽器,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文件加載,並在下拉菜單中填充指向這些文件的鏈接。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.