如何解决带有 select2 和 Toastr 的 WordPress 获取先前选择的值会破坏 select2 的行为
我正在使用 wordpress 并且我已经成功使用了 Select2 和 Toastr 库。
基本上我有一个下拉菜单,如果我更改,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
有人可以指导我吗,我在这里做错了什么?
谢谢
解决方法
“无法加载结果”。仅在返回数据为空或未找到时显示。
我在代码段下面测试了您的代码并且工作正常。
$(".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 举报,一经查实,本站将立刻删除。