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

【问题标题】：Using a jQuery Plugin ddSlick Dropdown - How do I dynamically populate JSON data?使用 jQuery 插件 ddSlick Dropdown - 如何动态填充 JSON 数据？
【发布时间】：2017-12-01 22:46:39
【问题描述】：

我有一个可能很简单的问题。我有一个用于精美下拉框的 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 脚本吗？

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

会生成一个新的选项列表。在此示例中，我使用 jQuery 的 grep 通过一个额外的自定义属性 (image_folder_id) 匹配 ddData 中的项目来创建一个新的过滤数组。注意：主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);
        }
    });
});

【讨论】：