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

Question

У меня есть несколько выпадающих списков HTML. После одного выбора, я хочу, чтобы он автоматически заполнил следующий выпадающий список. Вся эта информация вводится для заполнения списков из базы данных с использованием инструкции SQL и цикла foreach, поэтому я не могу жестко кодировать значения, подобные всем примерам, связанным с моим вопросом. В настоящее время у меня на данный момент немного JavaScript для этого, хотя я не уверен, что пойду в правильном направлении. Я думаю, что это потребует привлечения некоторых AJAX и слушателей onChange. Я просто не знаю, как начать.

Итак, как я могу это сделать? Я не прошу вас сделать это для меня, но только какой-то код (например, план), чтобы дать мне начало и получить меня, будет оценено! Спасибо!

операторы SQL:

<?php 
$host="xxxxxxx"; 
$dbName="xxxx"; 
$dbUser="xxxxxxxxxxxxxx"; 
$dbPass="xxxxxxxxxxx"; 


$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 vProducts ORDER BY [Major Category] ASC"; 
$sql_minor = "SELECT DISTINCT [Minor Category] FROM vProducts ORDER BY [Minor Category] ASC"; 
$sql_code = "SELECT DISTINCT [Product Report Code] FROM vProducts ORDER BY [Product Report Code] ASC"; 

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

Dropdowns:

<table cellspacing="5" align="center" id="dropdown-table"> 
    <thead> 
     <tr> 
     <th>Major Category</th> 
     <th>Minor Category</th> 
     <th>Report Code</th> 
     <th>SKU</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 


       <select id="major" onChange="updateCat();"> 
       <option value="" disabled="disabled" selected="selected">Please Select One</option> 
    <?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"> 
       <option value="" disabled="disabled" selected="selected">Please Select One</option> 
    <?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> 


      <td> 
       <select> 
       <option value="" disabled="disabled" selected="selected">Please Select One</option> 
    <?php foreach ($dropdown_code->fetchAll() as $drop_code): ?> 
        <option 
         value="code" 
         data-name="<?php echo $drop_code ['Product Report Code'];?>" 
        > 
         <?php echo $drop_code ['Product Report Code'];?> 
        </option> 
     <?php endforeach; ?> 
       </select> 
      </td> 


      <td> 
       <select> 
       <option value="" disabled="disabled" selected="selected">Please Select One</option> 
        <option value="sku">SKU</option> 
       </select> 
      </td> 
      <td><input type="button" value="Search" id="searchButton" onclick="show();"></td> 
      <td><button class="create-user" id="insertButton">Add Group</button></td> 
     </tr> 
    </tbody> 
</table> 

JavaScript:

// JS for Dropdown 

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

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

Answer 1

В качестве отправной точки я хотел бы предложить, глядя на раздел w3schools на AJAX PHP.

Использование AJAX PHP одним из подходов к этому было бы использовать событие DOM onchange вашего выпадающего списка, чтобы передать выбранное значение на страницу PHP через XMLHttpRequest в функции javascript.

Затем можно создать страницу PHP, чтобы вернуть второй список значений из базы данных. Возвращенные данные могут быть элементами для вашего второго раскрывающегося списка.

Глядя на ваш код, я бы выполнил первый SQL-запрос для создания основных элементов категории на главной странице, где находится ваша таблица. Второй запрос SQL для ваших предметов второстепенных категорий будет затем находиться на вашей второй странице, где будет создан вызов AJAX. Второй запрос будет вызываться только тогда, когда значение в ваших выпадающих списках будет изменено.

UPDATE 1: Добавление некоторого кода

1. Основные товары Выбрать Box

Запустите SQL запрос для генерации значений основных параметров.

<select id="majoritems" onChange="updateCat();"> 
<option value="" disabled="disabled" selected="selected">Please Select One</option> 
<?php echo $major_options; ?> 

2. Незначительные товары Выбрать Box

<select id="minoritems"> 
<option value="" disabled="disabled" selected="selected">Please Select One</option> 

3. Javascript AJAX вызовов

Следующая опирается на W3Sch ols в основном пример AJAX PHP.

<script>function updateCat(val){ 
if (val.length == 0) { 
    document.getElementById("minoritems").innerHTML = ""; 
    return; 
} else { 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("minoritems").innerHTML = this.responseText; 
     } 
    }; 
    xmlhttp.open("GET", "getminoritems.php?q=" + val, true); 
    xmlhttp.send(); 
}}</script> 

Когда страница getminoritems.php называется URL параметры установки, которые будут отправить VAL переменную через как переменную GET.Затем это можно использовать для запроса элементов в базе данных на основе этого значения.

4. Ваша страница PHP, чтобы вернуть список незначительных опций на основе значения отправленного в AJAX GET вызова

В вашей странице PHP теперь вы должны быть в состоянии получить доступ к $ _GET переменной д, который был задается в вызове AJAX со значением val. Принимая это, вы можете запросить свою базу данных, например.

$val = $_GET['q']; 

$sql_minor = "SELECT DISTINCT [Minor Category] FROM vProducts WHERE category = $val ORDER BY [Minor Category] ASC";

и т.д. и т.п ... код для возврата значений

Убедитесь, что возвращать значения в пределах <option> тегов в конце концов. Они будут выводиться внутри элемента выбора minoritems, поскольку функция javascript использует .innerhtml, чтобы установить его в текст ответа, полученный от вашего вызова AJAX.

Надеюсь, это поможет! PS: Я бы посоветовал сделать очень простой пример, используя учебник W3schools, если вы можете так хорошо, чтобы вы могли полностью сосредоточиться на том, что здесь происходит.