修改 jQuery 和 PHP 代码,将 ID 和文本值拉取到 OPTION 元素中


Modify jQuery and PHP code to pull through ID and text value into OPTION element

我有一个简单的选择菜单:

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

我想使用第一个 SELECT 中的 ID 来更改第二个 SELECT 的内容,ID 为"区域"

这是我正在使用的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 在选项元素的"值"和显示部分中包含相同的值:

<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> 元素中的正确位置

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);
}
相关文章: