Question

如何修改动态构建下拉列表的此函数，以便我可以从json数据动态构建无序列表。

</script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function() { 
        jQuery .getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
            $.each(jsonData, function (i, j) {
                document.index.spec_list.options[i] = new Option(j.options);
       });
     });});
</script>

* spec_list *是下拉列表的ID，即'select'here＆amp; options ，即（j.options）是表中的字段，其中数据作为json接收。我现在只有'msg'表字段，其中的数据用于动态填充'ul id =“msg”'。

Answer 1

因此，您希望将li元素附加到ID为“msg”的现有ul，其中每个li的内容来自.msg jsonData中每个条目的属性：

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var markup;

    markup = [];
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        markup.push("<li>");
        markup.push(j.msg);
        markup.push("</li>");
    });

    jQuery('#msg').append(markup.join(""));
});

Here's a working example。（请参阅下面的“偏离主题”评论;工作示例使用上述提示之一。）

或者，如果新的li应替换 ul中的现有，请使用

jQuery('#msg').html(markup.join(""));

...而不是append。

无论哪种方式，它使用着名的“在数组中构建它，然后join它”成语来构建标记，这几乎总是比在字符串连接中更有效（在JavaScript实现中）。（首先构建标记，然后通过单个DOM操作调用[在这种情况下通过jQuery]应用它将肯定比单独添加每个li更有效。

如果你不关心效率（这显示了Ajax调用的结果，毕竟，如果你知道只有几个li要追加......），你可以这样做：

jQuery.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
    var ul;

    ul = jQuery('#msg');
    // If you want to clear it first: ul.empty();
    jQuery.each(jsonData, function (i, j) {
        // Note: Be sure you escape `msg` if you need to; if it's already
        // formatted as HTML, you're fine without as below
        ul.append("<li>" + j.msg + "</li>");
    });
});

...但是如果你正在处理很多项目，或者如果你经常发生这种情况，你可能会更好地使用构建版本。

偏离主题：您的原始代码使用jQuery符号和$符号混合。可能最好坚持一个或另一个，所以我选择jQuery以上。如果您没有使用noConflict，或者您正在使用noConflict但仍然可以使用$的一个漂亮技巧，您可以安全地将上述内容更改为始终使用$。

如何从json数据动态构建无序列表

1 个答案: