別のドロップダウン選択に基づくフィルタドロップダウン

Question

複数のドロップダウンがあり、最初のドロップダウンで選択した内容に基づいて2番目のドロップダウンの内容をフィルタリングしたい。ここに私がこれまで持っていた以下のコードがあります。どうすればこのことができますか？

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ステートメントのオプションまたは大きなnoのオプションあなたのコードでselect文を実行し、AJAX Firstを学びましょう。その簡単で簡単なことは簡単にそれを学ぶことができます。 JSONとAJAXは2-3日かかることはほとんどありません。ユーザー選択に応じてAjaxコール機能でJSONを使用してデータを送信します。 Ajaxはnoを増やしますが、サーバへのリクエストの数は減少しますが、コードの長さは減少します。ページ読み込み時間が短縮され、保守が容易になり、検索エンジンにも適しています。 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>