Question

我有一个非常简单的问题。我有一个jQuery插件，用于花哨的下拉框。

使用以下命令调用插件：

$('#demoBasic').ddslick({
    data: ddData,
    width: 300,
    imagePosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});

填充下拉列表的JSON数据是：

var ddData = [
{
    text: "Facebook",
    value: 1,
    selected: false,
    description: "Description with Facebook",
    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
},
{
    text: "Twitter",
    value: 2,
    selected: false,
    description: "Description with Twitter",
    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
}
];

所以我想做的是动态地填充JSON数据。我可以编写PHP代码来进行搜索并返回JSON，但是我如何编程以便根据搜索加载它？

我有一个想法，只是通过一个ajax帖子加载它，然后将结果返回到div ....这会有效吗？

像：

submitHandler: function() {
    $.post('lookup.php', $("#lookup").serialize(), function(data) {
        $('#result').html(data);
    });
},

我可以通过这种类型的调用返回jQuery脚本吗？

Answer 1

昨天我遇到了类似的问题，我想在更改另一个过滤器时更新ddSlick选项。我发现的最简单的方法是破坏和重建。

在此示例中，我过滤了一个选项列表，但该方法将适用于Ajax调用提供的选项，或者其他方式。每当image_folder_select选择发生变化时

生成新的选项列表。在此示例中，我使用jQuery＆＃39; grep通过将ddData中的项目与额外的自定义属性（image_folder_id）进行匹配来创建新的过滤数组。注意：加载页面时会定义主ddData列表。
image_select选择列表将通过ddslick('destroy')恢复为原始状态。
带有新选项列表的新ddSlick实例绑定到image_select。

示例：

$("#image_folder_select").change(function () {
    filtered_ddData = $.grep(ddData, function(e) {return e.image_folder_id == $("#image_folder_select").val()});

    $('#image_select').ddslick('destroy');
    $('#image_select').ddslick({
        data: filtered_ddData,
        width: 512,
        height: 256,
        onSelected: function(data){
            $('#image_file_id').val(data.selectedData.value);
        }
    });
});

使用jQuery插件ddSlick Dropdown - 如何动态填充JSON数据？

1 个答案: