修改jQuery和PHP代碼以將ID和文本值插入OPTION元素

Question

我有一個簡單的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).fld_label;
      $('#regions').empty();
      for (var i = 0; i < regions.length; i++) {
        var regionOption = '<option value="'+regions[i]+'">';
        regionOption += regions[i];
        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;
    }

    echo json_encode($regions);

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

$conn -> close();

這樣很好。 我要嘗試解決的事情是，如何做，不能解決，以便代替第二個SELECT在option元素的“ value”和display部分中包含相同值的東西：

<select class="form-control" id="regions" name="regions">
    <option value="BLOB_NAV">BLOB_NAV</option>
    <option value="Insert">Insert</option>
    <option value="Select">Select</option>
</select>

我該如何更改代碼，以便可以進入例如

<select class="form-control" id="regions" name="regions">
    <option value="1">BLOB_NAV</option>
    <option value="2">Insert</option>
    <option value="4">Select</option>
</select>

這樣，當基於“區域”選擇的值進行處理時，我可以使用內部ID代替文本值。

我可以看到我需要將ajax文件上的PHP更改為：

 $sql = "SELECT cats.fld_label
              , cats.fld_id
           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, $fld_id);

    ...

    echo json_encode($regions);

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

$conn -> close();

但是后來我被困在：

1. 如何更改ajax PHP文件上的代碼，以使$ regions數組包含ID和文本值。
2. 如何更改jQuery代碼，以使其從ajax PHP輸出中獲取ID和文本值，並將它們放在<option>元素中的正確位置

Answer 1

PHP：將每個記錄的關聯數組添加到結果數組。

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

JS：訪問每個JSON記錄的字段。

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