修改 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();
但后来我被困住了:
- 如何更改 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);
}
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 使用Dalekjs测试工具,如何在Dropdown中选择Option(select元素)当没有“;值“;Option标记
- jQuery val() 返回一个在 select/option 元素上带有 IE8 的数组
- 根据select option元素将表单重定向到不同的URL,但重定向后未选中
- AngularJS - 隐藏<选择>元素,如果ng-option为空
- 修改 jQuery 和 PHP 代码,将 ID 和文本值拉取到 OPTION 元素中
- 有没有一种方法可以在Chrome中的Select Option元素上添加事件
- Javascript Option元素's在IE兼容性中选择
- 在Select元素的Option元素中获取自定义属性
- IE11: select元素在改变option.text时冻结
- 如何从表单元素
- 设置& lt; option>& lt; select>元素
- 通过选择SELECT OPTION克隆元素