Отсечение фильтра на основе другого выбора выпадающего списка

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 для передачи параметров для пользователя, а затем применить некоторые, если другое заявление в соответствии с выбором пользователя первым падать.

Совет: Если у вас большой нет. опций в select statement или большом no. из выбранных утверждений в вашем коде, затем перейдите и изучите AJAX First. его легко и просто вы можете легко изучить. 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>