我有一个简单的选择菜单:
<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();
但后来我被困住了:
- 如何更改 ajax PHP 文件上的代码,以便$regions数组包含 ID 和文本值。
- 如何更改 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);
}