Repopluate select with new data after ajax call

[mansouralex]

I have problems getting the select plugin working in my case, tried as suggested on the plugin website with no luck.

$.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();

            }});

What I need to achieve is removing all the current options and repopulate with the new ones. At the moment I found that not all items are populated to the select control.

Also, how I can remove all current options?

Any help?

Thanks.

[ArmindoMaurits]

Why don't you just clear the select via jquery, then call the data picker again (or maybe just the sync picker with selects function, but I don't know if that works).

$("cake-filling-types-select").empty();

[mansouralex]

@ArmindoMaurits Thank you for your reply.

Yes I used the empty jquery method now and it looks fine.

Also, for the other issue where some items are not getting into the select control, I found that these the ones that is missing the img src.

The updated code:

          $.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
                    });

                }});