다른 드롭 다운 선택에 따른 필터 드롭 다운

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> 

자바 스크립트 :

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> 

자바 스크립트

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을 사용하고 첫번째의 사용자 선택에 따라 어떤 경우 다른 문을 적용하려고합니다 쓰러지 다.

팁 : select 문이나 큰 번호의 옵션 중 하나. 당신의 코드에서 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>