下拉菜单,当您单击一个选项时,将下载一个文件



我正在创建一个网站作为学习工具,这个网站有PHP代码,由3个下拉菜单组成,每个下拉菜单都充满了3个数据库。前一个根据前一个选择动态填充。

我想做的是当用户选择最后一个菜单时,下载附加到该选项的文件。我不太知道如何做到这一点,我一直在做一些研究,似乎我最好的资产是使用 javascript,但我无法让它与我的 PHP 代码一起使用。

我认为我最好的选择是在包含链接的数据库中添加另一行,当用户单击某个选项时,它会根据该行下载。

<?php
//fetch_third_level_category.php
include('database_connection.php');
if(isset($_POST["selected"]))
{
$id = join("','", $_POST["selected"]);
$query = "
SELECT * FROM third_level_category 
WHERE second_level_category_id IN ('".$id."')
"; 
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '<option value="'.$row["third_level_category_id"].'">'.$row["third_level_category_name"].'</option>';
}
echo $output;
}
?>
/
  • /索引.php

//索引.php

$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
</head>
<body>
<br />
<div class="container">
<br /><br />
<div style="width: 500px; margin:0 auto">
<div class="form-group">
<select id="first_level" name="first_level[]" multiple class="form-control">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["first_level_category_id"].'">'.$row["first_level_category_name"].'</option>';
}
?>
</select>
</div>
<div class="form-group">
<select id="second_level" name="second_level[]" multiple class="form-control">
</select>
</div>
<div class="form-group">
<select id="third_level" name="third_level[]" multiple class="form-control">
</select>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#first_level').multiselect({
nonSelectedText:'Selecciona el driver',
buttonWidth:'400px',
onChange:function(option, checked){
$('#second_level').html('');
$('#second_level').multiselect('rebuild');
$('#third_level').html('');
$('#third_level').multiselect('rebuild');
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_second_level_category.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#second_level').html(data);
$('#second_level').multiselect('rebuild');
}
})
}
}
});
$('#second_level').multiselect({
nonSelectedText: 'Selecciona el modelo',
buttonWidth:'400px',
onChange:function(option, checked)
{
$('#third_level').html('');
$('#third_level').multiselect('rebuild');
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_third_level_category.php",
method:"POST",//index.php
data:{selected:selected},
success:function(data)
{
$('#third_level').html(data);
$('#third_level').multiselect('rebuild');
}
});
}
}
});
$('#third_level').multiselect({
nonSelectedText: 'Seleccona la serie del modelo',
buttonWidth:'400px'
});
});
</script>

您有两种方法,具体取决于您希望在用户选择该选项后立即开始下载还是在提交 Webform 时开始下载。

如果您想在选择选项后立即开始下载,则必须使用JavaScrip。您必须将事件侦听器添加到这些下拉列表中(使用 jQuery 可能更容易(,并且当甚至以某种方式触发文件下载时。

其他选择是在选择选项时不执行任何操作,而是从表单提交处理程序(提交表单时调用的 php scrip(中检查选定的选项,然后从那里开始下载。

甚至一些混合选项,即在下降值更改时使用JS提交表单...

最新更新