Question

返回填充HTML下拉框。

我有一个用JSON生成输出的php文件（dropdown.php）;

{ "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.names 替换为 jsondata.filenames ，我已将 select xml 的ID重命名为的 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 )

...糟糕

JQuery / JSON下拉框填充

3 个答案: