1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: material select / dropdown issue

Brecht Richard pro asked 8 years ago

Hello, I'm having an issue with the material select. I'm filling the dropdown when something is selected from an other dropdown with some javascript. When I use the browser-default there is no problem. But offcourse I want the material select! This is the javascript: 
$("#periode").change(function () {

        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetKampenVanPeriode")',
            dataType: 'json',
            data: { id: $("#periode").val() },
            success: function (kampen) {
                $("#kampen").empty();
                $.each(kampen, function (i, kamp) {

                    $("#kampen").append('<option value="'
                    + kamp.Value + '">' +
                    kamp.Text + '</option>');
                });
            },
            error: function (ex) {
                alert('Error!: ' + ex);
            }
        });
        return false;
"#periode" is the first dropdown. When the selection changes, the "#kampen" options are filled . Quite straight forward, but don't understand why it isn't working with the material select. Anyone that could help? Or I'm I just stuck with the browser-default?

Ian Morris free answered 5 years ago

Version: 4.5.7 Trying to dynamically create select dropdown.  The script runs fine and inserts all of the values, however when I select an item from the list, the dropdown box doesnt fade away after the selection.  If the content is static, the dropdown menu fades away after selection as expected. I have included my code below.  The JS below is contianed in a $(document).ready() 
$.get("views/funcs/get-cust-list.php", function(data){
var o = $.parseJSON(data);
$.each(o.custLookup, function(custName, arr){
var val = parseInt(arr.id);
var name = custName;
var activeCheck;
$("#cust_id").append('<option value="'+val+'" '+activeCheck+'>'+name+'</option>');
});
$('.mdb-select').material_select();
});


<select class="mdb-select colorful-select dropdown-primary" id="cust_id">
<option value="0" selected="" hidden="">Select A Client: </option>
</select>
   

Sebastian Kaczmarek staff commented 5 years ago

Indeed, there was a bug in the old 4.5.7 version. In 4.5.9 version we have rewritten the Material Select from scratch and all the issues have been addressed. However, in the 4.5.9 version, there is a nasty bug which has been fixed in the latest 4.5.10 version. So my suggestion is to use the latest MDB 4.5.10

Michal Szymanski staff answered 8 years ago

Thanks for info ijabit, we'll fix it.

ijabit free answered 8 years ago

Yes, there is a bug in the MDB3 version of the material select. When you destroy it and re-initialize it, there are leftover caret spans. I had to manually remove them like this: this.element.parent().siblings(".caret").remove(); this.element.parent().find(".caret").remove();

Michal Szymanski staff answered 8 years ago

Thank you for info, I'll keep it in mind :)

Brecht Richard pro answered 8 years ago

thanks, i found a way around. Destroying all en later initializing again was not ideal, it gave strange arrows all around. but it dit 'work'. As far as the solution : i simply initialize the second one after filling up and no problem then.

Michal Szymanski staff answered 8 years ago

Hi, I'm not sure if it can be helpful, but maybe try to destroy select and initialize it again before update the second one? $('select').material_select('destroy');
Write
Create snippet
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: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Brecht Richard
Pro User 10Support score
2Questions 2Answers 0Snippets