使用 jQuery 从数据库中填充选择框
Posted
技术标签:
【中文标题】使用 jQuery 从数据库中填充选择框【英文标题】：Populate select box from database using jQuery 【发布时间】：2012-06-07 21:33:30 【问题描述】：我正在尝试使用 jQuery 从 mysql 数据库中的值填充选择框。
数据库调用：
<?php
include 'db.php';
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
$tableName = "tbl_title";
$result = mysql_query("SELECT * FROM $tableName");
$data = array();
while ( $row = mysql_fetch_row($result) )
$data[] = $row;
//echo json_encode( $data );
?>
html：
<select id="a1_title">
<option>Default</option>
</select>
我找到了很多例子，但没有任何与我正在寻找的东西特别相关的例子，除非我今天没有力量。
有没有人可以指点我的链接？
【问题讨论】：
【参考方案1】：以下脚本将从 PHP 页面接收到的 JSON 加载下拉列表。
$(function()
var items="";
$.getJSON("yourPHPPage.php",function(data)
$.each(data,function(index,item)
items+="<option value='"+item.ID+"'>"+item.Name+"</option>";
);
$("#a1_title").html(items);
);
);
假设收到的JSON是这种格式
[ "ID" :"1", "Name":"Scott", "ID":"2", "Name":"Jon" ]
我注意到的另一件事是您正在执行 SELECT * FROM 表名来获取项目。我认为你不应该那样做。你应该只做两列（ID & NAME，如果你的表中有这些列。）。
这里有一个JSFiddle example，用于展示如何从 JSON 中获取数据。
【讨论】：
我喜欢这个......但似乎我在选择框中的项目得到“未定义”。返回的数据为：[["1","Mr."],["2","Miss"],["3","Ms."],["4","Mrs."],[ “5”，“博士”]]。如何修改我的代码以返回带有标签的 JSON？ Shyju，我知道距离这个答案'-'已经 3 年了，但你为什么说“select * from”？我也在别的地方读到过，但没看懂。是关于某种安全性吗？【参考方案2】： // retrieve value and text from ajax
var html = "<option value=\""+value+"\">"+text+"</option>";
$("#a1_title").append(html);
【讨论】：
【参考方案3】：我有同样的问题，你的建议是可行的
HTML & JS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
$(function()
var items="";
$.getJSON("get-data.php",function(data)
$.each(data,function(index,item)
items+="<option value='"+item.id+"'>"+item.name+"</option>";
);
$("#a1_title").html(items);
);
);
</script>
<select id="a1_title">
<option>Default</option>
</select>
</body>
</html>
php
include 'configurations/db-connections.php';
$q = "select id, name from college";
$sql = mysql_query($q);
$data = array();
while($row = mysql_fetch_array($sql, true))
$data[] = $row;
;
echo json_encode($data);
【讨论】：
以上是关于使用 jQuery 从数据库中填充选择框的主要内容，如果未能解决你的问题，请参考以下文章
使用 javascript 和 jquery，用数组结构填充相关的选择框