在 ajax 调用后，使用新数据重新填充图像选取器选择控件

Repopulating Image Picker select control with new data after ajax call

本文关键字：图像 填充 新填充 选取 控件 选择 ajax 新数据 调用 数据      更新时间：2023-09-26

我正在使用这个图像选择器 jQuery 插件 （http://rvera.github.io/image-picker/），我遇到了以下问题：

在

ajax 调用后使用新数据重新填充选择控件。

$.ajax({
    type: "GET",
    url: requestURL,
    dataType: 'json',
    success: function(result)
    {
       $.each(result, function(i, obj) {
       console.log(obj.description);
       $('#cake-filling-types-select')
          .append($("<option data-img-src='" + obj.image + "'></option>")                                         
           .attr("value", obj.code)
           .text(obj.description));
    });
    $("#cake-filling-types-select").imagepicker({
       show_label  : true
    });
    $("#cake-filling-types-select").data("picker").sync_picker_with_select();
}});

有关更多详细信息，请在此处找到问题：https://github.com/rvera/image-picker/issues/79

谢谢。

问题解决了。在 @ArmindoMaurits @ GitHub 的帮助下，因此使用 ' $（"#cake-filling-types-select"）.empty（）;' 可以清除此插件选择。

此外，对于某些项目未进入选择控件的另一个问题，我发现这些项目缺少 img src。

更新的工作代码：

      `$.ajax({
            type: "GET",
            url: requestURL,
            dataType: 'json',
            success: function(result){
               $("#cake-filling-types-select").empty();
                $.each(result, function(i, obj) {
                    if(obj.image != null)
                    {
                        var imgSrc = obj.image;
                    }else{
                        imgSrc = '';
                    }
           $('#cake-filling-types-select')
              .append($("<option data-img-src='" + imgSrc + "'></option>")
                      .attr("value", obj.code)
                       .text(obj.description));
                });
                $("#cake-filling-types-select").imagepicker({
                    show_label  : true
                });
            }});`
相关文章：