带有 select2 和 Toastr 的 WordPress 获取先前选择的值会破坏 select2 行为

WordPress with select2 and Toastr get previous selected value destroys select2 behavior

我正在使用 WordPress,并且我已经成功地使用了 Select2 and Toastr 个库。

基本上我有一个下拉菜单,如果我改变了,Toastr 会问我是否需要更新。

如果我点击“是”然后它会更新,如果我点击“否”那么我的下拉菜单应该设置以前的值并且什么都不会发生。

目前它正在选择以前的值,但如果我打开相同的下拉菜单尝试点击它进行搜索然后它说“无法加载结果”。

这是我到目前为止所做的 JS 代码。

var prevSubVarClientId;
jQuery('.mySubscription').select2({
    allowClear: true,
    placeholder: "",
    
    //minimumInputLength: 3,
    ajax: {
        type: "POST",
        url: '/wp-admin/admin-ajax.php',
        dataType: 'json',
        delay: 250, // delay in ms while typing when to perform a AJAX search
        data: function (params, page) {
        
        return {
            action: 'list_posts',
            q: params.term,
        };
        },
        processResults: function( data ) {
        
        var options = [];
        if ( data ) {          
            jQuery.each( data, function( index, text ) { 
            
            options.push( { id: text['id'], text: text['name']  } );
            });

        }
        return {
            results: options
        };
        },
        cache: true
    }
});

jQuery('.mySubscription').on('select2:selecting', function (evt) {
  prevSubVarClientId = jQuery('select').val();
});

jQuery('.mySubscription').change(function() {
    var $this = jQuery(this);
     jQuery(this).blur();
      alertify.confirm("Are you sure you want to transfer?",
  function(e){
        var subscriptionId = jQuery($this).data("subscription-id");
        var url = jQuery($this).data("ajax-url");        
        var userId = jQuery($this).val();        
        jQuery.ajax({
           type: "POST",
           url: url,           
            data : {
                    action : 'update_var_client_user_id',
                    userId : userId,
                    subscriptionId : subscriptionId
            },
           success: function(data)
           {  
            var data = JSON.parse(data);      
            toastr["success"]("Transferred Successfully." );          
            
           }
         });
  },
  function(){
    
    jQuery($this).val(prevSubVarClientId);    
    jQuery($this).select2().trigger('change');
    
  }).set({title:"Alert!!!"}).set({ labels:{ok:'Yes', cancel: 'No'} });

    
});

如您所见,我有 prevSubVarClientId 变量和 mySubscription 下拉列表 class。

jQuery('.mySubscription').change(function() { 在这里你可以看到我正在打开 alertify 确认框,如果我点击“否”,那么我正在执行以下代码。

jQuery($this).val(prevSubVarClientId);    
jQuery($this).select2().trigger('change');

但是每当我尝试再次打开下拉菜单时,我都会收到以下错误。

谁能指导我,我做错了什么?

谢谢

“无法加载结果”。仅在 return 数据为空或未找到时显示。

我在代码段下方测试了您的代码并且工作正常。

$(".js-data-example-ajax").select2();

jQuery('.js-data-example-ajax').on('select2:selecting', function (evt) {
    prevSubVarClientId = jQuery('select').val();
});

jQuery('.js-data-example-ajax').change(function() {
    var $this = jQuery(this);
    jQuery(this).blur();
    alertify.confirm("Are you sure you want to transfer?",
    function(e){
        console.log('change');
    },function(){
        console.log('no change');
        jQuery($this).val(prevSubVarClientId);    
        jQuery($this).select2().trigger('change');
    }).set({title:"Alert!!!"}).set({ labels:{ok:'Yes', cancel: 'No'} });
});
.select2-container, .select2-container--open .select2-dropdown--below {
    width: 200px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"></script>
<select class="js-data-example-ajax">
  <option value="abc">ABC</option>
  <option value="bca" selected>BCA</option>
  <option value="mnp">MNP</option>
  <option value="pqr">PQR</option>
</select>