使用 WHERE 子句的相关下拉列表
Dependent dropdown using WHERE clause
我正在寻求帮助。我需要根据之前的输入创建一个依赖下拉列表。在我的代码中一切正常，它从 MySQL 数据库发送和接收数据。当我 select 一场比赛时，我希望只显示与该比赛相关的锦标赛。我想用 SQL 语言来做，并把 ****** 放在我认为我可以做的地方。
在 MySQL 中，我有两个 tables - 一个名为 game_name 的游戏，我在其中接收第一部分的数据。第二个 table 称为锦标赛，包含 game_name1 和锦标赛列。最后，我有另一个输入屏幕发送数据，以便 game_name = game_name1.
require('db.php');
include("auth.php");
$status = "";
if (isset($_POST['new']) && $_POST['new'] == 1) {
$trn_date = date("Y-m-d H:i:s");
$main_game = $_REQUEST['main_game'];
$main_tournament = $_REQUEST['main_tournament'];
$start_date = $_REQUEST['start_date'];
$end_date = $_REQUEST['end_date'];
$number_of_teams = $_REQUEST['number_of_teams'];
$venue_region = $_REQUEST['venue_region'];
$venue_city = $_REQUEST['venue_city'];
$winner = $_REQUEST['winner'];
$runner_up = $_REQUEST['runner_up'];
$prize_pool = $_REQUEST['prize_pool'];
$winners_prize = $_REQUEST['winners_prize'];
$winner_odds = $_REQUEST['winner_odds'];
$submittedby = $_SESSION["username"];
$ins_query = "insert into tournament_info
(`trn_date`,`main_game`,`main_tournament`,`start_date`,`end_date`,`number_of_teams`,`venue_region`,`venue_city`,`winner`,`runner_up`,`prize_pool`,`winners_prize`,`winner_odds`,`submittedby`)values
('$trn_date','$main_game','$main_tournament','$start_date','$end_date','$number_of_teams','$venue_region','$venue_city','$winner','$runner_up','$prize_pool','$winners_prize','$winner_odds','$submittedby')";
mysqli_query($con, $ins_query)
or die(mysql_error());
$status = "New Record Inserted Successfully.
</br></br><a href='viewti.php'>View Inserted Record</a>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert New Tournament Record</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="sidenav">
<p><a href="dashboard">Home</a>
<p>
<p><a href="insert">Insert New Game Record</a></p>
<p><a href="view">View Game Records</a>
<p>
<p><a href="insertt">Insert New Tournament Record</a></p>
<p><a href="viewt">View Tournament Records</a>
<p>
<p><a href="insertti">Insert New Tournament Info Record</a></p>
<p><a href="viewti">View Tournament Info Records</a>
<p>
<p><a href="logout">Logout</a></p>
</div>
<div align="center" class="main">
<p><a href="dashboard.php">Dashboard</a>
| <a href="viewti.php">View Tournament Info Records</a>
| <a href="logout.php">Logout</a></p>
<div>
<h1>Insert New Tournament Record</h1>
<form name="form" method="post" action="">
<input type="hidden" name="new" value="1"/>
<select name="main_game" style="width: 200px;">
<option>-- Select Game --</option>
<?php
$records = mysqli_query($con, "SELECT game_name From Games");
while ($row = mysqli_fetch_array($records)) {
echo "<option value='".$row['game_name']."'>".$row['game_name']."</option>"; // displaying data in option menu
}
?>
</select>
<br><br>
**<select name="main_tournament" style="width: 200px;">
<option>-- Select Tournament --</option>
<?php
$records1 = mysqli_query($con, "SELECT * From tournaments");
while ($row = mysqli_fetch_array($records1)) {
echo "<option value='".$row['tournament']."'>".$row['tournament']."</option>"; // displaying data in option menu
}
?>
</select>**
<br><br>
<p><label>Start Date</label><br><input type="date" name="start_date" placeholder="Start Date"
style="width: 200px" required/></p>
<br>
<p><label>End Date</label><br><input type="date" name="end_date" placeholder="End Date" style="width: 200px"
required/></p>
<p><input type="text" name="number_of_teams" placeholder="Number of Teams" required/></p>
<br>
<select name="venue_region" style="width: 200px;">
<option> --Select Region --</option>
<option value="Europe">Europe</option>
<option value="Asia">Asia</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Africa">Africa</option>
<option value="Australia">Australia</option>
<option value="Online">Online</option>
</select>
<p><input type="text" name="venue_city" placeholder="Venue City" required/></p>
<p><input type="text" name="winner" placeholder="Winner" required/></p>
<p><input type="text" name="runner_up" placeholder="Runner Up" required/></p>
<p><input type="text" name="prize_pool" placeholder="Prize Pool" required/></p>
<p><input type="text" name="winners_prize" placeholder="Winners Prize" required/></p>
<p><input type="text" name="winner_odds" placeholder="Winner Odds"/></p>
<p><input name="submit" type="submit" value="Submit"/></p>
</form>
<p style="color:#FF0000;"><?php echo $status; ?></p>
</div>
</div>
</body>
</html>
这里我会怎么做
您可以在 select 游戏中监听变化事件 :
let gameSelect = document.querySelector('select[name="game"]');
gameSelect.addEventListener('change', (event) => {
let value = event.target.value
// hide all irrelevant inputs
let divs = document.querySelectorAll('div.depend-on-select-game');
divs.forEach(div => {
divs.style.display = 'none';
})
// show relevant input
let div = document.querySelector('div.depend-on-select-game.value-' + value);
div.style.display = 'block'
})
});
// set the default value here in the style
<div class="depend-on-select-game value-game1" style="display:block">
// your selects / inputs for game1
</div>
<div class="depend-on-select-game value-game2" style="display:none">
// your selects / inputs for game2
</div>
您只需执行一次，然后将所有特定于游戏的表单元素放在这里
它将隐藏不相关的输入，只显示 selected 游戏的相关输入
也隐藏inputs/selects不会提交到服务器
如果用户改变主意，数据不会丢失并且仍然存在，如果您即时更新 options/value 的 select 则不会出现这种情况] 根据比赛selected
我正在寻求帮助。我需要根据之前的输入创建一个依赖下拉列表。在我的代码中一切正常，它从 MySQL 数据库发送和接收数据。当我 select 一场比赛时，我希望只显示与该比赛相关的锦标赛。我想用 SQL 语言来做，并把 ****** 放在我认为我可以做的地方。
在 MySQL 中，我有两个 tables - 一个名为 game_name 的游戏，我在其中接收第一部分的数据。第二个 table 称为锦标赛，包含 game_name1 和锦标赛列。最后，我有另一个输入屏幕发送数据，以便 game_name = game_name1.
require('db.php');
include("auth.php");
$status = "";
if (isset($_POST['new']) && $_POST['new'] == 1) {
$trn_date = date("Y-m-d H:i:s");
$main_game = $_REQUEST['main_game'];
$main_tournament = $_REQUEST['main_tournament'];
$start_date = $_REQUEST['start_date'];
$end_date = $_REQUEST['end_date'];
$number_of_teams = $_REQUEST['number_of_teams'];
$venue_region = $_REQUEST['venue_region'];
$venue_city = $_REQUEST['venue_city'];
$winner = $_REQUEST['winner'];
$runner_up = $_REQUEST['runner_up'];
$prize_pool = $_REQUEST['prize_pool'];
$winners_prize = $_REQUEST['winners_prize'];
$winner_odds = $_REQUEST['winner_odds'];
$submittedby = $_SESSION["username"];
$ins_query = "insert into tournament_info
(`trn_date`,`main_game`,`main_tournament`,`start_date`,`end_date`,`number_of_teams`,`venue_region`,`venue_city`,`winner`,`runner_up`,`prize_pool`,`winners_prize`,`winner_odds`,`submittedby`)values
('$trn_date','$main_game','$main_tournament','$start_date','$end_date','$number_of_teams','$venue_region','$venue_city','$winner','$runner_up','$prize_pool','$winners_prize','$winner_odds','$submittedby')";
mysqli_query($con, $ins_query)
or die(mysql_error());
$status = "New Record Inserted Successfully.
</br></br><a href='viewti.php'>View Inserted Record</a>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert New Tournament Record</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="sidenav">
<p><a href="dashboard">Home</a>
<p>
<p><a href="insert">Insert New Game Record</a></p>
<p><a href="view">View Game Records</a>
<p>
<p><a href="insertt">Insert New Tournament Record</a></p>
<p><a href="viewt">View Tournament Records</a>
<p>
<p><a href="insertti">Insert New Tournament Info Record</a></p>
<p><a href="viewti">View Tournament Info Records</a>
<p>
<p><a href="logout">Logout</a></p>
</div>
<div align="center" class="main">
<p><a href="dashboard.php">Dashboard</a>
| <a href="viewti.php">View Tournament Info Records</a>
| <a href="logout.php">Logout</a></p>
<div>
<h1>Insert New Tournament Record</h1>
<form name="form" method="post" action="">
<input type="hidden" name="new" value="1"/>
<select name="main_game" style="width: 200px;">
<option>-- Select Game --</option>
<?php
$records = mysqli_query($con, "SELECT game_name From Games");
while ($row = mysqli_fetch_array($records)) {
echo "<option value='".$row['game_name']."'>".$row['game_name']."</option>"; // displaying data in option menu
}
?>
</select>
<br><br>
**<select name="main_tournament" style="width: 200px;">
<option>-- Select Tournament --</option>
<?php
$records1 = mysqli_query($con, "SELECT * From tournaments");
while ($row = mysqli_fetch_array($records1)) {
echo "<option value='".$row['tournament']."'>".$row['tournament']."</option>"; // displaying data in option menu
}
?>
</select>**
<br><br>
<p><label>Start Date</label><br><input type="date" name="start_date" placeholder="Start Date"
style="width: 200px" required/></p>
<br>
<p><label>End Date</label><br><input type="date" name="end_date" placeholder="End Date" style="width: 200px"
required/></p>
<p><input type="text" name="number_of_teams" placeholder="Number of Teams" required/></p>
<br>
<select name="venue_region" style="width: 200px;">
<option> --Select Region --</option>
<option value="Europe">Europe</option>
<option value="Asia">Asia</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Africa">Africa</option>
<option value="Australia">Australia</option>
<option value="Online">Online</option>
</select>
<p><input type="text" name="venue_city" placeholder="Venue City" required/></p>
<p><input type="text" name="winner" placeholder="Winner" required/></p>
<p><input type="text" name="runner_up" placeholder="Runner Up" required/></p>
<p><input type="text" name="prize_pool" placeholder="Prize Pool" required/></p>
<p><input type="text" name="winners_prize" placeholder="Winners Prize" required/></p>
<p><input type="text" name="winner_odds" placeholder="Winner Odds"/></p>
<p><input name="submit" type="submit" value="Submit"/></p>
</form>
<p style="color:#FF0000;"><?php echo $status; ?></p>
</div>
</div>
</body>
</html>
这里我会怎么做
您可以在 select 游戏中监听变化事件 :
let gameSelect = document.querySelector('select[name="game"]');
gameSelect.addEventListener('change', (event) => {
let value = event.target.value
// hide all irrelevant inputs
let divs = document.querySelectorAll('div.depend-on-select-game');
divs.forEach(div => {
divs.style.display = 'none';
})
// show relevant input
let div = document.querySelector('div.depend-on-select-game.value-' + value);
div.style.display = 'block'
})
});
// set the default value here in the style
<div class="depend-on-select-game value-game1" style="display:block">
// your selects / inputs for game1
</div>
<div class="depend-on-select-game value-game2" style="display:none">
// your selects / inputs for game2
</div>
您只需执行一次，然后将所有特定于游戏的表单元素放在这里
它将隐藏不相关的输入，只显示 selected 游戏的相关输入
也隐藏inputs/selects不会提交到服务器
如果用户改变主意，数据不会丢失并且仍然存在，如果您即时更新 options/value 的 select 则不会出现这种情况] 根据比赛selected