I am using Material Select to create my drop down list, In one scenario where i have to populate another Material select (drop down) using the first drop down. So, In my case i have first drop down with Countries and another for states and when user select a country from dropdown, Using jQuery AJAX i want to call Server and get States with Id and Name. But i am getting issues with Material Select to append those states in the list. Here is my code which was working fine before using material select, as i was using only Simple select tags.

Start your code here
$(function () {
 $('#country').on('change', function () {
 var stateDropDown = $('#state');
 //disable state drop down
 stateDropDown.prop('disabled', 'disabled');
 //clear drop down of old states
 stateDropDown.empty();
 //retrieve selected country
 var countryId = $(this).val();
 if (countryId.length > 0) {
 // ajax call to get States from Server
 $.ajax({
 url: '@Url.Action("GetStates", "Tenant")',
 type: 'GET',
 contentType: 'application/json; charset=utf-8',
 dataType: 'json',
 data: { countryId: countryId },
 async: true,
 success: function (response) {
 if (response != null && response.success) {
 //re-enable state drop down
 stateDropDown.prop('disabled', false);
 $.each(response.states, function (i, state) {
 $('#state').append('<option value="' + state.Value + '">' + state.Text + '</option>');
 console.log(state.Value + state.Text);
 });
 }
 },
 error: function (jqxhr, textStatus, error) {
 var err = textStatus + ", " + error;
 console.log("Request Failed: ", err);
 }
 });
 }
 });
 });

---