javascript - 从 PHP 服务器端脚本获取 JSON 数据并显示在下拉列表中

Question

我有一个下拉框“#pro”，选择它后会将一个数字发送到我的 php 脚本“ft-customerpo.php”。该 php 脚本应返回与该项目编号对应的条目，并在另一个名为“#custponumhold”的下拉框中显示结果。

我的html:

<label for="txtfield">Project Number <b style="color:red;">*</b></label>
<select id="pro" name="projectnoid"  class="inputvalues" required/>
   <option disabled selected value>-- Project Number</option>
   <?php echo $options_1; ?>
</select><br>

<label>Customer PO Number <b style="color:red;">*</b></label>
<select id="custponumhold" style="width: 250px;" name="custpo" class="inputvalues" required>

</select>

我的 JavaScript:

//CHAINED COMBOBOX
$(document).ready(function() {
  $('#pro').on('change', function() {
    var project = $(this).val();
    if (project) {
      $.ajax({
        type: 'POST',
        url: 'ft-customerpo.php',
        data: 'project=' + project,
        success: function(html) {
          $('#vendponum').html(html);
        }
      });
    }
  });
});

和“ft-customerpo.php”

<?php
require "../inc/dbinfo.inc";

$i=1;
$proj = mysqli_real_escape_string($_POST['projectnoid']);

if($proj)
{
    $rs = $conn->query("SELECT PONumber 
                        FROM tblCustomerPOs 
                        WHERE ProjectNum = '$proj'");

    $options[0] = "<option disabled selected value>-- Customer PO</option>";

   while($row[$i] = $rs->fetch_assoc()) {
        $options .= "<option value='".$row['PONumber']."'>".$row['PONumber']." 
        </option>";
        $i++;
    }
    echo json_encode($options);
}
?>

目前，当我更改项目编号时，它会正常发送请求。但我没有得到回复。我认为问题出在我的“ft-customerpo.php”上。抱歉，如果我的逻辑没有道理。客户 PO 下拉列表 (#custponumhold) 在应该显示任何选项时却没有显示。

Answer 1

Php 方面您必须像这样进行更改，首先创建 options 数组，但之后将其添加为字符串

<?php
require "../inc/dbinfo.inc";

$proj = mysqli_real_escape_string($_POST['projectnoid']);

if($proj)
{
    $rs = $conn->query("SELECT PONumber 
                        FROM tblCustomerPOs 
                        WHERE ProjectNum = '$proj'");

    $options = [];
    $options[0] = "<option disabled selected value>-- Customer PO</option>";

    while($row = $rs->fetch_assoc()) {
        $options[] = "<option value='".$row['PONumber']."'>".$row['PONumber']."</option>";
    }
    echo json_encode($options);
}
?>

Javascript 端

$(document).ready(function(){
  $('#pro').on('change',function(){
      var project = $(this).val();
      if(project){
          $.ajax({
              type:'POST',
              url:'ft-customerpo.php',
              data: {projectnoid: project },
              dataType:'json',
              success: function(data) {
                  $('#custponumhold').empty();
                  for(let i = 0; i < data.length; i++){
                     $('#custponumhold').append(data[i]);
                  }
              }             
          });
        }
  });
});

<小时/>