php 使用 jQuery 从数据库中填充选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10870667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate select box from database using jQuery
提问by NinjaCat
I am trying to populate a select box from values from a mysql database, using jQuery.
我正在尝试使用 jQuery 从 mysql 数据库中的值填充一个选择框。
db call:
数据库调用：
<?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:
HTML：
<select id="a1_title">
<option>Default</option>
</select>
There are a bunch of examples that I have found, but nothing specifically related to what I am looking for, unless the force is not with me today.
我找到了一堆例子，但没有什么特别与我正在寻找的东西相关，除非今天我没有这个力。
Is there a link someone can point me to?
有人可以指向我的链接吗？
回答by Shyju
The below script will load the dropdown list from the JSON received from the PHP Page.
下面的脚本将从 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);
});
});
Assuming the received JSONis in this format
假设收到的JSON是这种格式
[ { "ID" :"1", "Name":"Scott"},{ "ID":"2", "Name":"Jon"} ]
Another thing i noticed is that you are doing SELECT * FROM table name to get the items. I do not think you should do that. You should do only two columns (ID & NAME , if you you have those columns in your table.).
我注意到的另一件事是您正在执行 SELECT * FROM table name 来获取项目。我不认为你应该这样做。你应该只做两列（ ID & NAME ，如果你的表中有这些列。）。
Here is a JSFiddle exampleto show how to fetch data from the JSON.
这是一个JSFiddle 示例，用于展示如何从 JSON 中获取数据。
回答by Manellen
I have same problem, your suggestion is work
我有同样的问题，你的建议有效
HTML & JS
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
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);
回答by Arif
// retrieve value and text from ajax
var html = "<option value=\""+value+"\">"+text+"</option>";
$("#a1_title").append(html);
