从数据库中拉下来影响下一个下拉菜单

Question

您好，我从数据库中提取了一个下拉菜单。根据此选择，我想显示该类别下的选项列表。这是我希望从每个数据库中提取的数据库的图片，根据每个选择分配一个ID。 http://imgur.com/VOi9ydB 这就是我所拥有的

`
<?php
require ("dbconnect.php");
$db = new mysqli($servername, $username, $password, $db);
?>

<div class="label">Select Store:</div>

<select name="stores">
<option value = "">---Select---</option>
<?php
$queryusers = "SELECT * FROM `storeconst` ORDER BY `Store` ASC";
$db = mysqli_query($db, $queryusers);
while ( $d=mysqli_fetch_assoc($db)) {
echo "<option value='{".$d['Store']."}'>".$d['Store']."</option>";
}
?>
  </select>  
<?php
require ("dbconnect.php");
echo ("<br>");

$db = new mysqli($servername, $username, $password, $db);
?>

<div class="label">Incident Type:</div>

<select name="names">
<option value = "">---Select---</option>
<?php
$queryusers = " SELECT * FROM `infractiontype` ORDER BY `infractiontype`.`IncidentType` ASC";
$db = mysqli_query($db, $queryusers);
while ( $d=mysqli_fetch_assoc($db)) {
echo "<option value='{".$d['infractiontype']."}'>".$d['IncidentType']."</option>";
}
?>
  </select> 
<?php
require ("dbconnect.php");
echo ("<br>");

$db = new mysqli($servername, $username, $password, $db);
?>

<div class="label">Incident Severity:</div>

<select name="names">
<option value = "">---Select---</option>
<?php
$queryusers = " SELECT * FROM `severitytype` ORDER BY `SeverityType`.`ID` ASC";
$db = mysqli_query($db, $queryusers);
while ( $d=mysqli_fetch_assoc($db)) {
echo "<option value='{".$d['severitytype']."}'>".$d['SeverityType']."</option>";
}
?>
  </select> 

dbconnect.php

<?php
$servername = "localhost";
$username = "admin";
$password = "pass";
$db = "log";

// Create connection
$conn = new mysqli($servername, $username, $password, $db);

// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 
?>

为了使我的下一个下拉列表基于事件类型和事件严重性，我需要做些什么？

干杯

Answer 1

这取决于选项的数量。

一些选项：使用display：none

样式为所有可能的SELECT创建HTML

根据选择使用JavaScript来更改.style.display =＆＃39;块＆＃39; （或内联块）

如果有很多选项：通过AJAX传递选定的选项，其中返回的值是HTML选项，并使用innerHTML添加选项。

如果你对imgur的图片是包容性的而你不了解AJAX，那么更简单的方法是使用CSS none / block方法。

的 HTML

<select id="sel" onchange="getNext();">
   <option value="1">Option1</option>
   <option value="2">Option2</option>
   <option value="3">Option3</option>
   <option value="4">Option4</option>
</select>

<select id="sel1">
   <option>Option11</option>
   <option>Option12</option>
   <option>Option13</option>
   <option>Option14</option>
</select>
<select id="sel2">
   <option>Option21</option>
   <option>Option22</option>
   <option>Option23</option>
   <option>Option24</option>
</select>
<select id="sel3">
   <option>Option31</option>
   <option>Option32</option>
   <option>Option33</option>
   <option>Option34</option>
</select>

<强> CSS

#sel1,#sel2,#sel3{display:none;}

<强> JS

function getNext(){
  var sel = document.getElementById('sel');
  var next = sel.options[sel.selectedIndex].value;
  document.getElementById('sel' + next).style.display = 'block';
}