填充下拉菜单(选择)

时间:2012-07-25 20:54:31

标签: php jquery html populate

我一直试图根据这个答案解决我的问题: Populate select box from database using jQuery

我试图实现答案中的答案,但我在这里没有运气。截至目前,下拉菜单中显示的所有内容都是默认的" Stone"从它开始的项目。

任何人都可以节省时间并帮我解决问题。我的代码本质上应该从MySQL数据库中读取,该数据库从1开始有超过150个ID,并在相同的ID行中使用相应的名称来填充下载菜单。

下拉菜单的内容示例如下:

  • Stone
  • 金刚石

相应的DB会是什么样子:

ID           item_name
1            Stone
2            Grass
3            Diamond

我尝试这样做的代码是:

PHP (process_item_list.php):

$con = mysql_connect($DB_HOST,$DB_USER,$DB_PASSWORD);
$dbs = mysql_select_db($DB_NAME, $con);

$tableName = "itemlist";
$result = mysql_query("SELECT * FROM $tableName");

$data = array();
while ( $row = mysql_fetch_row($result) )
{
    $data[] = $row;
}
echo json_encode( $data );    
?>

jQuery的/使用Javascript

<script type="text/javascript">
$(function(){
      var items="";
      $.getJSON("process_item_lists.php",function(data){
        $.each(data,function(index,item) 
        {
          items+="<option value='"+item.id+"'>"+item.name+"</option>";
        });
        $("#tradeItems").html(items); 
      });
    });
</script>

HTML

<select id="tradeItems"> 
<option value="">Stone</option>
</select>

我也可以采用不同的方式来做到这一点,只要它在加载时仍然填充下拉菜单!

编辑:在有线的帮助下,PHP问题得到解决。以下是运行PHP文件时的结果:http://fogest.net16.net/mctrade/php/process_item_list.php 当我使用警告框运行实际页面时,它应该给我ID和项目名称,它们都返回undefined而不是正确的值。

1 个答案:

答案 0 :(得分:1)

http://fogest.net16.net/mctrade/php/process_item_list.php的结果看起来不像您期望的那样,它看起来像这样:

[ ["1","Stone","images\/stone.png"],
  ["2","Grass Block","images\/grass_block.png"],
  /* snip a lot of rows */
]

但你期待的是这样的:

[ { "id":"1", "name":"Stone", "image?":"images\/stone.png"},
  { "id":"2", "name":"Grass Block","image?":"images\/grass_block.png"},
  /* and so on */
]

我认为您希望使用mysql_fetch_assoc()代替mysql_fetch_row(),这可能会为您提供正确的输出。

加分:您可以在echo之前添加一行,为响应提供正确的内容类型:

header("Content-type: application/json");
echo json_encode($data);

备注:当我查看http://fogest.net16.net/mctrade/php/process_item_list.php的来源时,我发现了这一点:

<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->

这不应该是响应的一部分,它可能会使JSON解析器崩溃。