使用 AJAX 从 databse 填充 HTML 下拉列表
Populating HTML dropdown from databse using with AJAX
我按照教程使用 AJAX 动态填充下拉列表。这是我的代码配置.php
<?php
$con = mysql_connect("localhost", "root","");
if(!$con){
die('Could not connect:' .mysql_error());
}
mysql_select_db('carrental', $con);?>
vehicle_dropdown.php
<?php
include('config.php');
$sql=mysql_query("SELECT vehicleid,vehiclename FROM tbl_vehicles");
if(mysql_num_rows($sql)){
$data = array();
while (&row=mysql_fetch_array($sql)){
$data[] = array(
'id' => $row['vehicleid'],
'name' => $row['vehiclename']
);
}
header('Content-type: application/json');
echo json_encode($data);
}?>
车辆.php
<?php
include('config.php');
?>
<html>
<head>
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
function Vehicle() {
$('#vehicledll').empty();
$('#vehicledll').append("<option>Loading.....</option>");
$.ajax({
type: "POST",
url: "vehicle_dropdown.php",
contentType: "application/json charset=utf-8",
dataType: "json",
success: function (data) {
$('#vehicledll').empty();
$('#vehicledll').append("<option value='0'>--Select Country--</option>");
$each(data, function (i, item) {
$('#vehicledll').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
});
},
complete: function () {
}
});
}
$(document).ready(function () {
Vehicle();
});
</script>
</head>
<body>
<select id="vehicledll"></select>
</body>
</html>
但是,当我运行页面时,dopdown 仅显示消息"正在加载...."请帮忙
$each(data, function (i, item) {
$('#vehicledll').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
});
应该是
$.each(data, function (i, item) {
$('#vehicledll').append('<option value="' + data[i].id + '">' + data[i].name + '</option>');
});
您在$
后错过了.
contentType
应该contentType: "application/json; charset=utf-8",
相关文章:
- 如何在 HTML 下拉列表中制作锚标记
- 数据和HTML下拉列表
- HTML 下拉列表所选值
- 如何根据HTML下拉列表中的数量选择来计算价格
- 从 html.append 追加的 html 下拉列表中获取返回值
- 在复选框取消选中事件中从HTML下拉列表中删除项目
- HTML 下拉列表无法捕获 onChange() 如果下拉列表中只有一个值使用 javascript
- HTML 下拉列表到 Javascript 变量显示错误
- 如何从HTML下拉列表中选择多个值,而无需按住Ctrl按钮
- JavaScript 创建带有日期的 HTML 下拉列表
- 根据在 html 下拉列表中选择的国家/地区填写当前时间
- 在 POST MVC 之后保存 Html 下拉列表值
- 如何根据查询返回选择 html 下拉列表
- HTML下拉列表将我带到错误的URL
- JQuery 根据 HTML 下拉列表选择查找并替换 URL 中的查询字符串
- 使用 AJAX 从 databse 填充 HTML 下拉列表
- 使用 jQuery 和 html 下拉列表加载页面
- 创建包含 SQLite 字段内容的 html 下拉列表
- 在 html 下拉列表中选择默认值
- 从具有不同值的逗号分隔JSON对象填充html下拉列表