基於另一個下拉選擇的過濾器下拉菜單

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>