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

Question

我正在使用 WordPress，并且我已经成功使用了 Select2 和 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 下拉菜单。

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

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

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

谁能指导我，我在这里做错了什么？

谢谢

Answer 1

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

我在 sn-p 下测试了您的代码并且工作正常。

$(".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>