Заполнить поле выбора из базы данных с помощью jQuery

Я пытаюсь заполнить поле выбора значениями из базы данных mysql, используя jQuery.

вызов БД:

<?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>

Есть куча примеров, которые я нашел, но ничего конкретно не относящегося к тому, что я ищу, если только сила сегодня не со мной.

Есть ли ссылка, на которую кто-то может мне указать?


mysql php jquery populate
person NinjaCat    schedule 03.06.2012    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Приведенный ниже скрипт загрузит раскрывающийся список из JSON, полученного со страницы PHP.

$(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.

person Shyju    schedule 03.06.2012
comment
Мне это нравится ... но кажется, что я получаю неопределенность для элементов в поле выбора. Возвращаемые данные: [[1,мистер],[2,мисс],[3,мисс],[4,миссис],[5,доктор]]. Как мне изменить свой код, чтобы он возвращал JSON с метками? - person NinjaCat; 03.06.2012
comment
Shyju, я знаю, что прошло 3 года с момента ответа "-", но почему ты так сказал о select * from? Я тоже где-то читал, но не понял. Это о какой-то безопасности? - person Paula Fleck; 04.06.2015

arrow_upward
1
arrow_downward

У меня такая же проблема, ваше предложение работает

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);
person Manellen    schedule 12.06.2012