Populated sumo select is not refreshing

Question

I am using Sumo Select plugin for my application and the reload is not working. I have 2 dropdowns.

dp1, dp2

I am pulling a set of list for dp1 and when it is selected the dp2 will be sorted as per db1 results. for this i need to have dp2 reloaded. The code is below.

$("#dp1").change(function(e){
    e.preventDefault();
    var id = document.getElementById("dp1").value;
    $.ajax({
        url:'try_out.php',
        method: 'POST',
        dataType: 'json',
        data: {id:id},
        success:function(data){
            $.each(data.line_items, function(i, item_list) {
                $('#dp2')[0].sumo.add(item_list.description);
            });
            //WHERE IT HAS TO BE RELOADED - DOESN'T WORK
            $('#dp2')[0].sumo.reload();
        },
        failure: function (data) {
            console.log('AUL');
        }
    });
});

Where am I making the mistake! Cheers.

Answer 1

This costed a lot. Finally found out that removing HTML select data first and then reloading the dropdown will make the dropdown fresh.

$('#dp2').html('');
$('#dp2')[0].sumo.reload();

The Answer:

$("#dp1").change(function(e){
    $('#dp2').html('');
    $('#dp2')[0].sumo.reload();
    e.preventDefault();
    var id = document.getElementById("dp1").value;
    $.ajax({
        url:'try_out.php',
        method: 'POST',
        dataType: 'json',
        data: {id:id},
        success:function(data){
            $.each(data.line_items, function(i, item_list) {
                $('#dp2')[0].sumo.add(item_list.description);
            });
            //WHERE IT HAS TO BE RELOADED - DOESN'T WORK
            $('#dp2')[0].sumo.reload();
        },
        failure: function (data) {
            console.log('AUL');
        }
    });
});