Topic: MDB Select freez browser
Bruno Rotrou pro asked 5 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 5 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