Question

我正在努力让这个解决方案起作用：https://stackoverflow.com/a/30400111/4532066

我有一个简单的SELECT菜单：

<select class='form-control' id='builders' name='builder_id'>
    <option value="1">Oracle</option>
    <option value="2">SQL</option>
</select>

我想使用第一个SELECT中的ID来更改第二个SELECT的内容，ID为“regions”

这是我正在使用的jQuery代码：

$(document).ready(function() {
  $('#builders').change(function() {
    var currentValue = $(this).val();
    $.get("ajax_cats.php", {
      'builder_id': currentValue
    }, function(data) {
      var regions = $.parseJSON(data);
      $('#regions').empty();
      for (var i = 0; i < regions.length; i++) {
        var regionOption = '<option value="' + regions[i]['fld_label'] + '">';
        regionOption += regions[i]['fld_label'];
        regionOption += '</option>';
        $('#regions').append(regionOption);
      }
    });
  });
});

这是“ajax_cats.php”

的内容

 $sql = "SELECT cats.fld_label
           FROM tbl_b_cats cats
          WHERE cats.fld_parent = ? 
       ORDER BY cats.fld_label";

/* initialise */
$stmt = $conn->stmt_init();

/* prepare */
if (!$stmt->prepare($sql)) {
    throw new Exception("Error preparing statement: $stmt->error, SQL query: $sql");
}

/* bind */
if (!$stmt->bind_param('s', $_GET['builder_id'])) {
    throw new Exception("Error binding parameter: $stmt->error");
}

/* execute & store */
$stmt->execute();
$stmt->store_result();

/* 404 for no results */
if ($stmt->num_rows == 0) {
    header('HTTP/1.0 404 Not Found');
    exit;
} else {

    $regions = array();

    /* get results */
    $stmt->bind_result($fld_label);

    while ($stmt->fetch()) {
        $regions['fld_label'][]   = $fld_label;
    }

    //print_r(array_values($regions));
    //$bob = json_encode($regions);
    //r($bob);
    echo json_encode($regions);

}
/* free and close */
$stmt->free_result();
$stmt->close();

$conn -> close();

我已确认“ajax_cats.php”返回的数据是JSON格式 - 例如

{
    "fld_label": ["AP", "AR", "EAM", "GL", "HR", "INV", "Other", "PA", "PO", "SysAdmin"]
}

我认为问题出在jQuery中，有了这一部分：

var regions = $.parseJSON(data);
$('#regions').empty();
for (var i = 0; i < regions.length; i++) {
    var regionOption = '<option value="'+regions[i]['fld_label']+'">';
    regionOption += regions[i]['fld_label'];
    regionOption += '</option>';
    $('#regions').append(regionOption);
}

从昨天的S / Overflow上阅读，“长度”选项仅在您使用数组时有效。

因为如果我这样做：

console.log(regions.length);

它返回“未定义”

我想知道如何解决这个问题？

由于

Answer 1

找到JSON长度的正确方法是使用如下键：

var length = regions.fld_label.length;

这将为您提供JSON键值的长度，使用此值可以循环到JSON中特定键的值。

这样说，希望你不会得到那个错误

var regionOption = '<option value="'+regions.fld_label[i]+'">';

Answer 2

需要一些调整：

将var regions = $.parseJSON(data);更改为var regions = $.parseJSON(data).fld_label;。这将为您提供一系列区域。
然后将regions[i]["fld_label"]更改为regions[i]

代码段：

var data = "{ \"fld_label\": [\"AP\", \"AR\", \"EAM\", \"GL\", \"HR\", \"INV\", \"Other\", \"PA\", \"PO\", \"SysAdmin\"]}";

var regions = $.parseJSON(data).fld_label; // To get the array ["AP", "AR, ...]

$('#regions').empty();

for (var i = 0; i < regions.length; i++) {
  var regionOption = '<option value="' + regions[i] + '">';
  regionOption += regions[i];
  regionOption += '</option>';
  $('#regions').append(regionOption);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="regions"></select>

循环输出json_encode

2 个答案: