Topic: MDB Select freez browser

Bruno Rotrou pro asked 4 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 4 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:



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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