I am trying to refresh a select after executing another jQuery. I am creating firstly the select options using cURL, which produces code like this. Then I have the HTML that looks like htis I am loading the options into the select with this jquery Which works fine. Then I have another script to delete an option from the select

Refresh selectpicker options after jQuery success is not working

I am trying to refresh a select after executing another jQuery. I am creating firstly the select options using cURL, which produces code like this.

$json_dropdown = '[{"id":"1475471145964056","name":"Option1"},
{"id":"935675176941821","name":"Option2"},
{"id":"555309881810660","name":"Option3"},
{"id":"304608093904515","name":"Option4"}]';

Then I have the HTML that looks like htis

<h2>Delete topic</h2>
<div class="form-group">
<select class="form-control selectpicker show-tick" name="topic" id="topic_del" data-show-subtext="true" data-live-search="true"  showIcon="true" data-style="btn-default" data-size="8" data-width="100%" title="Choose a TOPIC to DELETE..." required></select>
</div>
    <div class="form-group">
    <button type="button" class="btn btn-danger" id="delete_topic">Delete Topic</button></span>
</div>
<div id="results_del"></div>

I am loading the options into the select with this jquery

$('#topic_del').click(function(){
    var a = {Topic:<?echo $json_dropdown; ?>}
    $.each(a.Topic, function topics (key, value) {
        $("#topic_del").append($('<option></option>').attr('data-tokens',value.id).val(value.id).html(value.name));
        //$("#topic").attr('data-tokens',value.id);
    });
});

Which works fine. Then I have another script to delete an option from the select using ajax

// Delete Topic
$('#delete_topic').click(function(){
    // bind 'myForm' and provide a simple callback function 
  
    $(this).prop("disabled", true);
      // add spinner to button
    $(this).html(
        `<i class="fa fa-spinner fa-spin"></i> Deleting Topic`
      );
    $(this).removeClass("btn-danger");
    $(this).addClass("btn-warning");
    
    var type = $("#type").val();
    var action = $("#action_del").val();
    var account = $("#account").val();
    var topic = $("#topic_del").val();
    
    $.ajax({
        type:'POST',
        data:{ 'type': type, 'action': action, 'account': account, 'topic': topic  }, 
        url:'js/actions.php',
        success: function(data){
                $('#results_del').html(data);
                $('#delete_topic').prop("disabled", false);
                $('#delete_topic').html("Delete Topic");
                $('#delete_topic').addClass("btn-danger");
                $('#delete_topic').removeClass("btn-warning");
                
                var a = {Topic:<?echo $json_dropdown; ?>}
                $.each(a.Topic, function topics (key, value) {
                    $("#topic_del").append($('<option></option>').attr('data-tokens',value.id).val(value.id).html(value.name));

                });
            }
      });
    return false;

});

In this script, what I am trying to achieve is to refresh the options after the delete script is successful, using the same script I am using to initially create the options. It seems I am doing something wrong, but I cannot figure out what.

UPDATE

Just realized that if I remove the selectpicker and try to remove the option that I just deleted from the select in the success like this $("#topic_del option[value='" +topic+ "']").remove(); it will work. However, if I put back the selectpicker it will not remove the option. Could it be something with the selectpicker not allowing to do it?

Answer

I was able to achieve the functionality thanks to this thread Selectpicker with add or delete values

by adding these two lines in the success

$('.selectpicker option:selected').remove();
$('.selectpicker').selectpicker('refresh');

Advertisement

Answer