Использование Ajax для отображения данных в выпадающем списке

Question

Я пытаюсь отобразить данные из моей базы данных в своем комбинированном ящике с помощью ajax, но затем запускаю сценарий, мой комбинированный список остается пустым.

Вот мой комбинированный список

<select id="name" name="name">
    <option value= ""></option>
</select>

С помощьюследующий скрипт PHP Я пытаюсь выбрать данные из моей базы данных:

<?php    
$servername = "localhost";
$username = "root";
$password = "pass";
$dbname = "db";

$conn = new mysqli($servername, $username, $password, $dbname) ;
if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error) ;
}else {

    $query = 'SELECT * FROM scu_stock';    
    $res = mysqli_query($conn, $query) ;
  if (mysqli_num_rows($res) > 0) {
     $result = mysqli_fetch_assoc($res) ;
    echo $result['name'];
  }else{
     $result = mysqli_fetch_assoc($res) ;
    echo "error";
  }    
} 
?>

Следующий код должен ввести данные в поле со списком:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
  function getCode() { 
    console.log("getCode before ajax", jQuery('#name').val());
    jQuery.ajax({ 
      url: './get/get1.php', 
      method: 'POST', 
      data: {'id' : jQuery('#name').val()},
      success: function(response){ 
        console.log("getCode after ajax", jQuery('#name').val());
        jQuery('#name').val(response);
      }, 
      error: function (request, status, error) { 
        alert(request.responseText); 
      }, 
    });                 
  } 
</script>

Скрипт возвращается пустым, и я не могуувидеть любые изменения в выпадающем списке.Кто-нибудь знает, что не так со скриптом?

Обновление 1:

Когда я изменяю комбинированный список на текстовое поле, я вижу, что текстовое поле заполнено данными.Я не могу получить данные, которые возвращаются из базы данных в выпадающем списке.Кто-нибудь знает решение этой проблемы?

Это работает:

<input type="text" id="name" name="name" />

Это не работает:

<select id="name" name="name">
    <option value= ""></option>
</select>

Answer 1

Во-первых, вам нужно изменить свой PHP, чтобы он возвращал все строки:

 if (mysqli_num_rows($res) > 0) {
     $result = json_encode(mysqli_fetch_all($res)) ; // fetch all and json_encode()
  }else{
    $result = json_encode(array('error' => 'no rows returned'));
 }
 echo $result;

Затем вам нужно перебрать возвращенные результаты в AJAX, чтобы заполнить раскрывающийся список:

success: function(response){ 
    console.log("getCode after ajax", jQuery('#name').val());
       $.each(response, function(index,json){
           jQuery('#name')
               .append($("<option></option>")
               .attr("value",response.value).text(response.value));
           });
       }, 

response.value необходимо настроить, чтобы соответствовать тому, что вы возвращаете в JSON.Нам нужно увидеть JSON, чтобы сказать вам, что именно здесь поставить.

Answer 2

В вашем случае ответом должен быть JSON Array в указанном ниже формате.

 var response = [{"option": "option1", "value" : "option1"];

И вам нужно выбрать выбранную по умолчанию опцию на основе некоторого условия по вашему выбору, например, если значение опции соответствуетнекоторая конкретная строка.

Чтобы отобразить параметры выбора, вы можете изменить код следующим образом.

 function getCode() { 
   console.log("getCode before ajax", jQuery('#name').val());
   jQuery.ajax({ 
      url: './get/get1.php', 
      method: 'POST', 
      data: {'id' : jQuery('#name').val()},
      success: function(response){ 
         console.log("getCode after ajax", jQuery('#name').val());
         //jQuery('#name').val(response); // change this line based on your default selected line condition
         $.each(response, function(index,json){
             jQuery('#name')
                .append($("<option></option>")
                .attr({"value": response, "selected":"selected"}).text(response));
            });
      }, 
      error: function (request, status, error) { 
         alert(request.responseText); 
      }, 
   });                 
 }

Вы также можете избавиться от приведенной ниже строки, так как она будет заполнена через вашОтвет JSON, вам не нужно добавлять пустую опцию.

<option value= ""></option>

Надеюсь, это решит вашу проблему.