基于另一个下拉选择的过滤器下拉菜单

Question

我有多个下拉菜单，并且希望根据第一个下拉列表中选择的内容过滤第二个下拉菜单的内容。以下是我到目前为止的代码。我怎么能这样做？

HTML/PHP：

<td>       
    <select id="major" onChange="updateCat();"> 
     <?php foreach ($dropdown_major->fetchAll() as $drop_major): ?> 
       <option 
        value="" 
        data-name="<?php echo $drop_major ['Major Category'];?>" 
       > 
        <?php echo $drop_major ['Major Category'];?> 
       </option> 
     <?php endforeach; ?> 
    </select> 
</td> 


<td> 
    <select id="minor"> 
     <?php foreach ($dropdown_minor->fetchAll() as $drop_minor): ?> 
       <option 
        value="" 
        data-name="<?php echo $drop_minor ['Minor Category'];?>" 
       > 
        <?php echo $drop_minor ['Minor Category'];?> 
       </option> 
     <?php endforeach; ?> 
    </select> 
</td> 

的JavaScript：

function updateCat() { 
    var e = document.getElementById("major"); 
    var majorSelected = e.options[e.selectedIndex]; 

    document.getElementById("minor").value = majorSelected.dataset.name; 
} 

数据库连接和SQL语句：

<?php 
$host="xxxxxxxxxxx"; 
$dbName="xxxxx"; 
$dbUser="xxxxxxxxxxxxx"; 
$dbPass="xxxxxxxx"; 


$dbh = new PDO("sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass); 
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
$sql_major = "SELECT DISTINCT [Major Category] FROM ProductTable ORDER BY [Major Category] ASC"; 
$sql_minor = "SELECT DISTINCT [Minor Category] FROM ProductTable ORDER BY [Minor Category] ASC"; 

$dropdown_major = $dbh->query($sql_major); 
$dropdown_minor = $dbh->query($sql_minor); 
?> 

Answer 1

对不起没有太多时间不可以令你的答案为你的代码，但给你一个例子，它一定会帮助你。运行下面的代码段。

HTML

<select id="first" onchange="showsecondlist()"> 
<option>Select</option> 
<option value="1"> 1 </option> 
<option value="2"> 2 </option> 
</select> 
<br> 
<select id="second"></select> 

和Javascript

function showsecondlist() 
{ 
var uservalue=document.getElementById("first").value; 
if(uservalue==1) 
document.getElementById("second").innerHTML='<option value="1.1">1.1</option><option value="1.2">1.2</option>'; 
else if(uservalue==2) 
document.getElementById("second").innerHTML='<option value="2.1">2.1</option><option value="2.2">2.2</option>'; 
} 

该代码会为你工作，但尝试使用JSON发送选项，用户，然后根据用户第一选择涂抹一些，如果else语句落下。

提示：如果你有很大的没有。选择语句中的选项或大号代码中的select语句然后去学习AJAX。它简单易用，您可以轻松学习。 JSON和AJAX几乎不需要2-3天。Ajax根据用户选择调用函数并使用JSON发送数据。虽然Ajax增加没有。的请求到服务器，但它会减少代码长度。这减少了页面加载时间，易于维护，并且适合搜索引擎。 Google爱用较少代码和更多信息的页面，并且将来也会帮助您轻松解决许多问题。

function showsecondlist() 
 
{ 
 
var uservalue=document.getElementById("first").value; 
 
if(uservalue==1) 
 
document.getElementById("second").innerHTML='<option value="1.1">1.1</option><option value="1.2">1.2</option>'; 
 
else if(uservalue==2) 
 
document.getElementById("second").innerHTML='<option value="2.1">2.1</option><option value="2.2">2.2</option>'; 
 
}

<select id="first" onchange="showsecondlist()"> 
 
<option>Select</option> 
 
<option value="1"> 1 </option> 
 
<option value="2"> 2 </option> 
 
</select> 
 
<br><br> 
 
<select id="second"></select>