JQuery / JSON下拉框填充

Question

返回到填充HTML下拉框。

我有一个php文件(dropdown.php)产生一个JSON格式的输出；

{ "filenames" : [ "xml_cd.xml", "xml_plants.xml" ] }

我现在正在尝试让JQuery生成一个包含这些选项的下拉框。

这是HTML。

<body>

<script>

var obj;

function setupTableNamesList()
{
  $.getJSON ("dropdown.php",
    function(jsondata) {
      if ( jsondata.names.length > 0 )
      {
        var html = '<select id="tablename" name="tablename">';
        html += '<option value="none">Please select a table</option>';
        for ( i = 0; i < jsondata.filenames.length; i++ )
        html += '<option value="' + jsondata.filenames[i] +'">' + jsondata.filenames[i] + '</option>';
        html += "</select>";
        $("#select xml").html(html);
      }

    }//function
  );

}//setupTableNamesList

$(document).ready(function(){

  setupTableNamesList();  

});//$(document).ready




</script>

    <form>
<div id ="test">

</div>
        <div id ="select xml">

        </div>
    </form>
</body>

我没有收到任何类型的错误，但下拉框也没有出现-在正确的方向上轻推将不胜感激！

编辑* php脚本

<?php


$dir = glob("xml/*.xml");
$count = count($dir);
$json = '{ "filenames" : [ ';
        $j = 0;

if ($count > 0)
{
    for ($i = 0; $i < $count; $i++) {

        $j++;
        if ($j > 1)
        {
            $json .=  ', ';
        }
        $name = (substr($dir[$i],4));
        $json .= '"' . $name . '"';

    }

    $json .= ' ] } ';
    echo ($json);
    }
else
{
    echo "error";
}   

?>

Answer 1

jsondata.names.length > 0应为jsondata.filenames.length > 0。更好的方法是：

if (jsondata && jsondata.filenames && jsondata.filenames.length > 0)

这将防止你的应用程序出错，以防你得不到你期望的东西。

Answer 2

您的JavaScript实现的一个基本版本似乎可以工作：

jQuery(document).ready(function (e) {

    var jsondata = { "filenames" : [ "xml_cd.xml", "xml_plants.xml" ] }

    if ( jsondata.filenames.length > 0 )
    {
        var html = '<select id="tablename" name="tablename">';
        html += '<option value="none">Please select a table</option>';
        for ( i = 0; i < jsondata.filenames.length; i++ )
            html += '<option value="' + jsondata.filenames[i] +'">' + jsondata.filenames[i] + '</option>';
        html += "</select>";

        jQuery("#selectxml").html(html);
    }

});

注意，我已经用jsondata.filenames替换了jsondata.names，并且将元素的ID从select xml重命名为selectxml。

See the fiddle here。

在这种情况下，我假设问题出在php上。我强烈建议在php中正确设置头文件。这里有一个非常基本的例子：

<?php

header('Content-Type: application/json');

$json = '{ "filenames" : [ "xml_cd.xml", "xml_plants.xml" ] }';
echo $json;

?>

Answer 3

if ( jsondata.names.length > 0 )

哦..。