jQuery成功后刷新selectpicker选项不起作用答案

【问题标题】：Refresh selectpicker options after jQuery success is not workingjQuery成功后刷新selectpicker选项不起作用
【发布时间】：2020-06-27 09:22:27
【问题描述】：

我正在尝试在执行另一个 jQuery 后刷新选择。我首先使用 cURL 创建选择选项，它会生成这样的代码。

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

然后我就有了看起来像 htis 的 HTML

<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>

我正在使用这个 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);
    });
});

效果很好。然后我有另一个脚本来使用 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;

});

在这个脚本中，我想要实现的是在删除脚本成功后刷新选项，使用与我最初创建选项相同的脚本。似乎我做错了什么，但我不知道是什么。

更新

刚刚意识到，如果我删除 selectpicker 并尝试删除我刚刚从选择中删除的选项，就像 $("#topic_del option[value='" +topic+ "']").remove(); 这样成功。但是，如果我放回selectpicker，它不会删除该选项。可能是 selectpicker 不允许这样做吗？

【问题讨论】：

目前发生了什么？另外，$json_dropdown; 中的相同值是在选择框中再次加载吗？我没有找到任何删除代码。
@Swati 顺便说一句，现在它没有刷新选择。 $json_dropdown; 中的值不应相同，因为它不应包含已删除的值。

标签： javascript php jquery

【解决方案1】：

感谢这个线程Selectpicker with add or delete values，我能够实现该功能

通过添加这两行就成功了

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

【讨论】：

【解决方案2】：

还有一件事。似乎$('.selectpicker').selectpicker('refresh'); 只会在之前有任何其他操作的情况下执行，例如$('.selectpicker option:selected').remove();

【讨论】：