填充下拉菜单（选择）

Posted 2023-05-09

【中文标题】填充下拉菜单（选择）

【英文标题】：Populating a Drop Down Menu (select)

【发布时间】：2012-07-24 09:34:32

【问题描述】：

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

我已经尝试实施那里的答案中所说的内容，但我在这里没有任何运气。到目前为止，下拉菜单中显示的都是默认的“Stone”项目。

谁能抽出一些时间帮我解决我的问题。我的代码本质上应该从具有超过 150 个 ID 的 mysql 数据库中读取，从 1 开始，并使用相同 ID 行中的相应名称来填充加载时的下拉菜单。

下拉菜单内部的示例：

石头 草 钻石

对应的数据库是什么样的：

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>

我也愿意采用不同的方法来执行此操作，只要它在加载时仍能填充下拉菜单！

编辑：在wirey 的帮助下，PHP 问题得到了修复。以下是运行 PHP 文件的结果：http://fogest.net16.net/mctrade/php/process_item_list.php 当我使用应该给我 ID 和项目名称的警报框运行实际页面时，它们都返回未定义而不是正确的值。

【问题讨论】：

做一个 console.log(item)、console.log(item.id)、console.log(item.name) 看看会发生什么

你必须验证你是否得到一个有效的 JSON 对象

你试过item.ID和item.item_name吗？名字好像错了。

您从服务器收到什么？在您的代码中添加以下内容以查看是否收到任何数据，因为您的 jquery 是正确的： alert(item.id + ' ' + item.name);

@wirey 我什么也没得到，尽管这确实帮助我意识到我最初在 php 文件中得到了 404，因为它位于错误的位置。

【参考方案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 解析器崩溃。

【讨论】：

您再次检查该页面，它似乎提供了我想要的更多内容，但仍然返回未定义。

好的，现在看起来好多了。但是，您需要更改您的 javascript 以引用 data.ID 而不是 data.id，以及 data.item_name 而不是 item.name。

我将变量更改为 item.ID 和 item.item_name，现在我得到第一个变量是正确的，但 item.item_name 仍然未定义，

并检查我上面添加的关于 Hosting24 Analytics Code 的备注，我认为它需要删除。

无法删除。它是由虚拟主机添加的。