微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我正在使用 wordpress 并且我已经成功使用了 Select2Toastr 库。

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

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

目前它选择了上一个值,但是如果我打开相同的下拉列表,尝试点击它进行搜索,然后它会说“无法加载结果”。

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

/etc/passwd

如你所见,我有 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

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

enter image description here

有人可以指导我吗,我在这里做错了什么?

谢谢

解决方法

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。