I have used Select plugin from https://www.jqueryscript.net/demo/select-box-search-option/.I have used select multiple times and in which used json to load option dynamically. I have kept plugins in function and used that function after where I loading json data. But it is duplicating the select as Here is the screenshot.How to fix that

Here is the code

$(document).ready(function(){
        //select option  
        function getserchselect() {
            $('.js-searchBox').searchBox();
            $('.refineText').addClass('a_OmFXh a_rZBUz');
            $('.searchBoxElement').addClass('a_RZ4Gm');
            $('.a_1Kd5U').children('.searchBoxElement').addClass('a_gvwkb');
            $('.refineText').bind('blur', function () {
              $(this).removeClass('a_Gzhp9');
            });
            $('.a_1Kd5U').children('input').attr('readonly', true);
            $('.refineText').bind('focus', function () {
                $(this).addClass('a_Gzhp9');
            });
            $(window).scroll(function() {
              if($(window).scrollTop()   window.innerHeight == $(document).height()) {
                  //alert("bottom!");
                  $('.searchBoxElement').addClass('a_RZ4Gmd');
              }else{
                $('.searchBoxElement').removeClass('a_RZ4Gmd');
              }
          });
        }
                var blanguageOptions = '';
                $.getJSON('' BASEURL 'js/languages.json', function(data){
                blanguageOptions  = '<option value="">Select</option>';
                $.each(data, function(key, blanguage){
                blanguageOptions  = '<option value="' blanguage.code '">' blanguage.name '</option>';
                });
                $('#blanguage').html(blanguageOptions);
                getserchselect();
            }); 


//PRODUCT ID CODE LIKE UPC GCID
    var productcodeidptions = '';
$.getJSON('' BASEURL 'js/productID_code.json', function(data){
    productcodeidptions  = '<option value="">-Select-</option>';
    $.each(data, function(key, PDIDC){
        productcodeidptions  = '<option value="' PDIDC.code '">' PDIDC.name '</option>';
    });
    $('#pdcdlistsl').html(productcodeidptions);
    // getserchselect();

  });
});

CodePudding user response：

$('.js-searchBox').searchBox(); instanciates the plugin on all .js-searchBox elements.
So if getserchselect() is ran twice, the plugin is instanciated twice.

Remove $('.js-searchBox').searchBox(); and add $('#blanguage').searchBox(); or $('#pdcdlistsl').searchBox(); before those getserchselect(); calls.