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

【问题标题】：JQuery chosen Dynamic ajax call option duplication issue, If use empty() element then lose default selected valueJQuery 选择动态 ajax 调用选项重复问题，如果使用 empty() 元素则丢失默认选定值
【发布时间】：2020-10-09 14:35:42
【问题描述】：

$(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");

然后失去默认选择值

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

【问题讨论】：

标签： javascript jquery ajax vue.js jquery-chosen

【解决方案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 并给出响应然后清空元素并再次在 selected 中设置选定的值

Api 响应带有选定的值

【讨论】：