Заполнение выпадающего окна из базы данных без перезагрузки страницы

Question

У меня есть база данных, скажем, 450 элементов в ней. Каждый элемент имеет номер модели и идентификатор производителя.

На странице поиска у меня есть возможность поиска по модели &, но списки являются довольно грязными.

В настоящее время вы должны выбрать марку, а затем нажать кнопку «Отправить», а затем у вас есть другое раскрывающееся меню со списком моделей с одинаковой маркой.

Я хотел бы сделать так, чтобы при выборе make он автоматически заполнил выбор паттерна модели, используя javascript, ajax, jquery или действительно все, что сделало бы это возможным.

У меня не так много, чтобы продолжать здесь, так как я не очень хорошо знаю языки. Реальная проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как динамически заполнять массив из базы данных на основе того, что выбрано из первого раскрывающегося списка, а затем использовать его для заполнения второго раскрывающегося списка.

Любые рекомендации/рабочие решения будут очень признательны.

ПРИМЕЧАНИЯ: В настоящее время, как я уже говорил, вам нужно выбрать make, hit submit, затем выбрать модель - это мой текущий код для этого, хотя я не думаю, что это будет очень полезно, используя $ _GET.

<div class="panel panel-info"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">Model Search</h3> 
        </div> 
        <div class="panel-body"> 
        <ul class="nav nav-tabs" role="tablist"> 
         <li role="presentation" class="active"><a href="#type" aria-controls="type" role="tab" data-toggle="tab">Make</a></li> 
         <li role="presentation"><a href="#model" aria-controls="model" role="tab" data-toggle="tab">Model</a></li> 
        </ul> 
        <div class="tab-content"> 
         <div role="tabpanel" class="tab-pane fade in active" id="type"> 
          <br> 
           <form method="GET"> 
           <div class="input-group"> 
            <?php 
            $check = mysqli_query($con, "SELECT DISTINCT Make FROM Products ORDER BY Make ASC"); 
             echo '<select name="MAKE" style="width:100%;height:33px;">'; 
              if(strcmp($_GET['MAKE'], '') != 0) 
               echo '<option value="' . $_GET['MAKE'] . '">' . $_GET['MAKE'] . '</option>'; 
              while($row = mysqli_fetch_array($check)) { 
               echo '<option value="' . $row["Make"] . '">' . $row["Make"] . '</option>'; 
              } 
             echo '</select>'; 
            ?> 
            <span class="input-group-btn"> 
            <button class="btn btn-default" onclick="window.location.href='#model'" type="submit">Find Models</button> 
            </span> 
           </div><!-- /input-group --> 
           </form> 
         </div> 
         <div role="tabpanel" class="tab-pane fade" id="model"> 
           <br> 
           <form method="GET"> 
           <div class="input-group"> 
            <?php 
            $Make = $_GET['MAKE']; 
            $check = mysqli_query($con, "SELECT * FROM Products WHERE `Make`='$Make' ORDER BY Model ASC"); 
             echo '<input type="hidden" name="MAKE" value="' . $Make . '">'; 
             echo '<select name="UPC" style="width:100%;height:33px;">'; 
              while($row = mysqli_fetch_array($check)) { 
               echo '<option value="' . $row["UPC"] . '">' . $row["Model"] . '</option>'; 
              } 
             echo '</select>'; 
            ?> 
            <span class="input-group-btn"> 
            <button class="btn btn-default" onclick="window.location.href='#model'" type="submit">Search!</button> 
            </span> 
           </div><!-- /input-group --> 
           </form> 
         </div> 
        </div> 
        </div> 
        <div class="panel-footer"></div> 
      </div> 

Answer 1

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

<option value="someValue">someValueName</option> 
<option value="someOtherValue">someOtherValueName</option> 
<option value="anotherValue">anotherValueName</option> 

используя скрипт, который вы использовали раньше.

Затем в начальной страницы, которые он делает запрос AJAX для get_options.php, например так:

function getOptions() { 
    make=document.getElementById("make"); //replace with where you actually get the make from 
    var xmlRequest = new XMLHttpRequest(); 
    xmlRequest.onreadystatechange=function(){ 
     if (xmlRequest.readyState==4 && xmlRequest.status==200) { 
      document.getElementById("someSelector").innerHTML = xmlRequest.responseText; 
      //someSelector is the ID of your <select> tag. 
     } 
    } 
    xmlRequest.open("GET","get_options.php?MAKE="+make,true); 
    xmlRequest.send(); 
} 

Этот сценарий получит марку автомобиля от входа (я предполагаю, что, вероятно, текстовый ввод), отправьте его на номер get_options.php, получите список <option> и заполните селектор (id="someSelector") с указанными параметрами. Поскольку is является запросом AJAX, а скорее PHP, он может быть выполнен в любой момент после загрузки документа и будет выполнять ту же функцию. Я бы рекомендовал использовать его в onchange случае селектора макияжа, например

<input type="text" id="make" onchange="getOptions();"> 

Answer 2

Вы можете использовать простой JQuery-Аякс:

первого предоставить идентификатор, чтобы выбрать заявление для первого селектора в

<select name="MAKE" style="width:100%;height:33px;" id="make"> 

сейчас в JQuery

<script> 
    $(function(){ 
$('#make').change(function(){ 
var opt= $('#make').val(); 
$.ajax({ 
     url: 'your url of page where you get all data to show according to the value received from your first selector ', 
     type: 'get', 
     data: opt(data you want to send to get option), 
     success: function(response) { 
      //response contains all the data you wish to populate and using jquery populate to the select option 
     } 
    }); 

}); 



}) 
    </script>