我有一个由数据库填充的下拉列表(学生的名字和姓氏)。这很好用。有一些 javascript 允许搜索工作，但与我的问题无关。代码:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Find person ></button>
<div id="Dropdown" class="drop-content">
<input type="text" placeholder="Search" id="myInput"
这个想法是让用户从下拉列表中选择一个人，然后将有关该学生的信息输出到与下拉列表相同的页面上(因此无需重新加载页面)。目前它什么也没做，也没有显示任何错误。
最佳答案
这是我如何开始:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Find Student ></button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<div id="studentdrop">
<?php
// $pdo = new PDO('mysql:host=localhost;dbname=thename', 'root', 'root');
// $result = $pdo->query('SELECT student_forename, student_surname FROM students');
$result = array(
array("student_id" => 1, "student_forename" => 'Joe', "student_surname" => 'Jones'),
array("student_id" => 2, "student_forename" => 'Mary', "student_surname" => 'Jones'),
array("student_id" => 3, "student_forename" => 'Perry', "student_surname" => 'Wallace')
);
echo "<select id='user_id'>";
foreach ($result as $row) {
echo '<option value="' . $row['student_id'] . '">' . $row['student_forename'] . " " . $row['student_surname'] . '</option>';
}
echo "</select>";
?>
</div>
</div>
</div>
<div class="data"></div>
<script type="text/javascript">
$(document).ready(function () {
$('.dropbtn').click(function () {
$.get( "output.php", { id: $('#user_id option:selected').val() }, function(data) {
$('.data').text(data);
console.log(data);
});
});
});
</script>
</body>
</html>
这将是从数据库中提取并使用选项设置选择的页面。您必须进行修改，因为我没有时间设置数据库并对其进行测试。但结果是一个可以与选择选项一起使用的数组。
我还更新了 javascript 以发出获取请求来提取用户数据并填充 <div>返回数据的标签。
这是 output.php页面:
<?php
$id = $_GET['id'];
switch($id) {
case 1:
echo "This is student Joe Jones";
break;
case 2:
echo "This is student Mary Jones";
break;
case 3:
echo "This is student Perry Wallace";
break;
}
这是一个简单的页面，但您可以对其进行修改以查询数据库并返回您想要的任何数据。这是使用传入的id从ajax获取请求index.php页。我建议添加输入验证和检查以确保它是经过净化的数据。
如果您创建一个目录并将这两个文件放入其中，您可以使用内置服务器的 PHP 运行它。这是我喜欢做的事情:php -S localhost:8080 .
如果您有任何疑问，请告诉我。
关于javascript - 下拉选择后，存储选择并使用 mysql 数据库的结果刷新同一页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42317878/