Question

我有这段代码，当我点击第一个下拉列表中的值时，我需要根据我的选择将MySQL中的新数据输入到我的第二个下拉列表中。

我这里有这个代码：

$('#sale_type').change(function() {

    // get the form information
    // this can be done in many ways but we are going to put the form 
    // data into a data object
    var formData = {
      'selectedValue' : $('#sale_type').val()
    };

    // send the data via Ajax
    $.ajax({
      type      : 'POST', // the method we want to use to send the data
      url       : 'getTypeDetails.php', // the url where we want to 
                                                // send the data
      data      : formData, // the data object we created
      dataType  : 'json', // what type of data we want to get back
      encode    : true
    })
      // execute function when data has been sent and server
      // code is processed
      .done(function(data) {
            // HERE ADD THE CODE THAT UPDATES THE OTHER DROPLIST
            // I BELIEVE YOU WILL BE ABLE TO ACCESS THE DATA LIKE THIS
            // data[0], data[1]... TO GET THE VALUE 
      });

  });

});

这是getTypeDetails.php：

<?php
    require_once('../include/global.php');

    $data = $_POST['selectedValue'];

    // Connect to database
    // Use the data to get the new information
    $query = "SELECT * FROM purchases WHERE sale_type = :data";
    // MySQL
    $results = $conn->prepare($query);
    $results->bindValue(":data", $data);
    $exec = $results->execute();
    $res = $results->fetchAll();

    $data = array();
    $i = 0;
    foreach($res as $row){
         $data[i] = $row['sale_details'];
         $i++;
    }

    echo json_encode($data);
?>

问题是我无法通过id=sale_details

将$ data [i]放入我的新下拉列表中

所以我不知道该放什么：

.done(function(data) {
                // HERE ADD THE CODE THAT UPDATES THE OTHER DROPLIST
                // I BELIEVE YOU WILL BE ABLE TO ACCESS THE DATA LIKE THIS
                // data[0], data[1]... TO GET THE VALUE 
          });

修改

这些是我的HTML下拉列表：

<label for="sale_type" class="col-lg-1 control-label" style="float:right">النوع</label>
                        <select id="sale_type" name="sale_type" class="dropdown-header"  style="float:right">
                                  <option value="undefined">اختر</option>
                                  <?php
                                  foreach($fetchType as $ft){ ?>
                                  <option value="<?php echo $ft['sale_type'] ?>"><?php echo $ft['sale_type'] ?></option>
                                  <?php } ?>
                            </select>
                            <label for="sale_details" class="col-lg-1 control-label" style="float:right">الصنف</label>
                        <select id="sale_details" name="sale_details" class="dropdown-header"  style="float:right">

                            </select>

Answer 1

它应该是这样的：

 .done(function(data) {
    var secondDropdown = $("#second-dropdown");
    secondDropdown.empty();
    $.each(data, function(index, value) {
        secondDropdown.append("<option>" + value + "</option>");
    });
   return;
  }

Answer 2

用我的代码替换你的js代码

<script>  
   $(document).ready(function() {
     $('#sale_type').change(function() {
    var formData = { 'selectedValue' : $( "#sale_type option:selected" ).val() };
    console.log(formData);
    $.ajax({
       type: 'POST',  
       url: 'getTypeDetails.php',
       data: formData,
       success: function(data){              
      var obj = jQuery.parseJSON(data);      
      var secondDropdown = $("#sale_details");
      secondDropdown.html('');
      for (var prop in obj) {
         secondDropdown.append("<option>" + obj[prop] + "</option>");
        } 

       },
       error: function(errorThrown){
      alert(errorThrown);
       }

       });

     return false;
     });
   });
  </script>

并添加jquery链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

在<head>标记

中

使用AJAX将数据回显到下拉列表中

2 个答案: