![](/img/trans.png)
[英]Populate select options from database to dynamic select option using jQuery
[英]Populate select box from database using jQuery
我正在嘗試使用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>
我發現了很多例子,但是與我要尋找的東西沒有特別的關系,除非今天沒有力量。
有人可以指向我鏈接嗎?
以下腳本將從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示例 ,展示了如何從JSON獲取數據。
// retrieve value and text from ajax
var html = "<option value=\""+value+"\">"+text+"</option>";
$("#a1_title").append(html);
我有同樣的問題,你的建議是可行的
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.