使用 2 个视图/文档用 JSON 数据填充下拉列表

Question

我在使用一些 JSON 数据填充下拉列表时遇到一些问题，我怀疑发生错误的原因是我在 #stuff div 中附加 $.post 的方式，但我已经尝试了几种方法，但无法解决它的窍门。

选择 id="" 标签 & div 位于另一个视图中（它不是这个特定文档的一部分），以这种方式填充下拉列表是否有问题？

我试图提醒“listItems”，并且我已经得到了选项值等...不明白为什么它不会填充。

任何帮助将不胜感激。

来自 $.post =

{"childrendata":[{"id":"42","parent":"1","fName":"hej","lName":"nisse","birthdate":"2011-10-21"}]}

jQuery/js 的 Json 响应：

 $("#stuff").append(function(){


                $.post("show_relations", {},
                            function(data)
                            {
                            $("#stuff").empty();

                            json = eval('('+data+')');

                                if(data == '{"childrendata":[]}')
                                {
                                    $("#stuff").append("No relations registered.");
                                }
                                else
                                {
                                  var listItems= "";

                                      for (var i = 0; i < json.childrendata.length; i++)
                                      {
                                        listItems+= "<option value='" + json.childrendata[i].fName + "'>" + json.childrendata[i].lName + "</option>";
                                      }

                                    $("#child_list").html(listItems);
                                }
                            });
            });
    });

Answer 1

编辑：根据您的评论，我假设您的问题纯粹是单页的。

该代码的问题似乎是您尝试使用 .append()使用一个函数（这是有效的 jQuery），但该函数不会返回 jQuery 可以附加到“stuff”节点的任何内容； $.post 进行 Ajax 调用，该调用立即返回。

相反，请尝试类似以下内容（根据需要修改 Ajax 调用的 URL）：

$.post("url/to/post/to", {},
    function(data) {
        $("#stuff").empty(); //Clear your stuff div

        var children = data.childrendata; //jQuery automatically unserializes json

        if(children.length == 0) {
            $("#stuff").append("No relations registered.");
        }
        else {
            $('#stuff').append('<select id="child_list"></select>');
            $.each(children, 
                function(index, value) {
                    //Append each option to the selectbox
                    $("#child_list").append("<option value='" + value.fName + "'>" + value.lName + "</option>");
                }
            );
        }
    },
    'json'
);

$.each() 是通用 jQuery 迭代器，它有助于整理代码。

其作用是向提供的 URL 发送 Ajax post，该 URL 使用序列化的 json 对象进行响应。回调获取该响应（jQuery 已自行反序列化），将新的选择添加到“#stuff”div，然后将动态创建的选项添加到新的选择。

尾注：很抱歉没有发布 $.each 文档的链接，StackOverflow 目前只允许我在一篇文章中发布 2 个超链接。