material select / dropdown issue

Topic: material select / dropdown issue

Brecht Richard pro asked 9 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?

Add comment

Michal Szymanski staff pro premium priority answered 9 years ago

0 0 Best answer

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');

Add comment

Brecht Richard pro answered 9 years ago

0 0 Best answer

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.

Add comment

Michal Szymanski staff pro premium priority answered 9 years ago

0 0 Best answer

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

Add comment

ijabit answered 9 years ago

0 0 Best answer

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();

Add comment

Michal Szymanski staff pro premium priority answered 9 years ago

0 0 Best answer

Thanks for info ijabit, we'll fix it.

Add comment

Ian Morris answered 6 years ago

0 0 Best answer

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 pro premium commented 6 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Brecht Richard

Pro User

10Support score
2Questions 2Answers

0Snippets likes 0Snippets