Material select selecting option

Hello,

I'm having trouble using jquery code to select material select options. Finally got some time to isolate the problem

Having the snipped below, I have three questions

1. Why the selected option is not displayed?

2. Why option[value="2"] is not selected after this simple code?

$('#selectValue2-button').click(function() {

$('#select4-select option:selected').prop('selected', false); // clear previously selected value

$('#select4-select option[value="2"]').prop('selected', true); // Select value = 2

console.log('Selected value: ' + $('#select4-select').val()); // Check that value 2 is actually selected

$('.mdb-select').materialSelect({ destroy: true });

$('.mdb-select').materialSelect({});

})

3. Why this is working properly in version 4.8.2?

Expected behavior

'Select...' option selected

'Option 2' selected after pressing of button

Actual behavior

No option selected before button click

No option selected after button click

Resources

https://mdbootstrap.com/snippets/jquery/jorge_nunez_malledo/1293486