Topic: MDB Select freez browser
                  
                  Bruno Rotrou
                  pro
                  asked 6 years ago
                
Expected behavior Create mdb select on fly
//Init select hauteur en fonction de select element
$(document).on('change','#element-contrainte', function (e) {
  $("#hauteur-contrainte").material_select({destroy: true});
   $("#hauteur-contrainte").empty();
  let source = new Array();
  let option = '<option value="" disabled selected>-- Sélectionner --</option>';
  option += '<option value="0">Tous les éléments</option>';
  if($(this).val() == "contrainteRe"){ source = sourceHtRehausses; }
  else if($(this).val() == "contrainteTe"){ source = sourceHtTetes; }
  else if($(this).val() == "contrainteDa"){ source = sourceHtDalles; }
  else if($(this).val() == "contrainteEd"){ source = sourceHtElements; }
  else{
    option = '<option value="" disabled selected>-- Sélectionner --</option>';
  }
  jQuery.each(source, function(index, item) {
    option += '<option value="'+item.ht+'">'+item.ht+'</option>';
  });
  $("#hauteur-contrainte").html(option);
  $("#hauteur-contrainte").material_select();
  $('.mdb-select').on("click",function(e){
    e.stopPropagation();
  });
});
Actual behavior at each init the style of select growup with display:inline!important and freeze the browser.
<select class="mdb-select md-form initialized" id="hauteur-contrainte" name="hauteur-contrainte" required="" style="position: absolute; top: 1rem; left: 0px; height: 0px; width: 0px; opacity: 0; padding: 0px; pointer-events: none; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important; display: inline!important;" tabindex="-1"><option value="" disabled="" selected="">-- Sélectionner --</option><option value="0">Tous les éléments</option><option value="15">15</option><option value="25">25</option></select>
thanks for help
                      
                      Sebastian Kaczmarek
                      staff
                        answered 6 years ago
                    
Please upgrade to the latest version: 4.8.11. You are using a very outdated version which may be the cause of the issue. Please see this snippet to see how it works with the latest version: https://mdbootstrap.com/snippets/jquery/s-kaczmarek/1320904
Demo:
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
 - Premium support: No
 - Technology: MDB jQuery
 - MDB Version: 4.5.9
 - Device: IMac
 - Browser: chrome
 - OS: OSX
 - Provided sample code: Yes
 - Provided link: No