JQuery 选择动态 ajax 调用选项重复问题，如果使用 empty() 元素则失去默认选择值

Question

$(this.el).ready(function(){
            setTimeout(function(){
                var subItemsData = [];
                $(self.el).chosen({
                    width: '100%',
                    allow_single_deselect: true,
                    no_results_text: "Oops, nothing found!",
                    search_contains: false,
                    max_selected_options: self.params.maxselected ? self.params.maxselected : 0
                }).on('change', function(evt, params) {

                    var value = $(self.el).val();
                    self.set(value);
                    console.log("value",value);
                }).on('chosen:showing_dropdown', function(evt, params) {
                })
                
                $('#patient_diagnosis_chosen ul li.search-field input').autocomplete({
                    source: function( request, response ) {
                            if(request.term.length >= self.params.minlength){
                            $.ajax({
                                url: baseURL+'api/service/v1/get-data',
                                dataType: "json",
                                method:'post',
                                data:{
                                    'ids':$(self.el).val(),
                                    'key':request.term
                                },
                                success: function( data ) {
                                    var subItems=[]
                                    data.input_data.forEach((item,index)=>{
                                        
                                        subItems.push( "<option value="+item.id+">"+ item.code +' - '+item.short_description  + "</option>" );
                                        subItemsData.push(item) 
                                    })
                                    
                                    $(self.el).append(subItems).trigger("chosen:updated");
                                }
                            });
                        }
                    }
                }); 
                
            },100);     
        });

此代码能够调用 api 并获得 api 响应，但问题是选项重复如果我使用

$(self.el).empty().append(subItems).trigger("chosen:updated");

然后丢失默认 select 值

如果可以清空元素，设置默认元素

Answer 1

这个问题已经解决了这个代码对我有用。

var self = this;
        // var ids=[]
        $(this.el).ready(function(){
            setTimeout(function(){
                $(self.el).chosen({
                    width: '100%',
                    allow_single_deselect: true,
                    no_results_text: "Oops, nothing found!",
                    search_contains: false,
                    max_selected_options: self.params.maxselected ? self.params.maxselected : 0
                }).on('change', function(evt, params) {

                    var value = $(self.el).val();
                    // ids = $(self.el).val();
                    self.set(value);
                    console.log("value",value);
                }).on('chosen:showing_dropdown', function(evt, params) {
                })
                
                $('#patient_diagnosis_chosen ul li.search-field input').autocomplete({
                    source: function( request, response ) {
                            if(request.term.length >= self.params.minlength){
                            $.ajax({
                                url: baseURL+'api/service/v1/get-data',
                                dataType: "json",
                                method:'post',
                                data:{
                                    'ids':$(self.el).val(),
                                    'key':request.term
                                },
                                success: function( data ) {
                                    var subItems=[]
                                    var ids=$(self.el).val()
                                    data.input_data.forEach((item,index)=>{
                                        subItems.push( "<option  value="+item.id+">"+ item.code +' - '+item.short_description  + "</option>" );
                                    })
                                    $(self.el).empty().append(subItems).trigger("chosen:updated");
                                    var test = $.trim(ids);
                                    var testArray = test.split(',');
                                    $(self.el).val(testArray).trigger("chosen:updated");
                                }
                            });
                        }
                    }
                }); 
            },100); 
            
        });

当使用选定的值调用 ajax 并给出响应时，清空元素并再次在 chosen

中设置选定的值

Api 响应带有选定值

JQuery 选择动态 ajax 调用选项重复问题，如果使用 empty() 元素则失去默认选择值

JQuery chosen Dynamic ajax call option duplication issue, If use empty() element then lose default selected value

javascript

ajax

jquery

jquery-chosen

vue.js