Topic: material select jQuery, how to append more items using jQuery with Ajax requests

Jawand Singh Virk free asked 5 years ago

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
 //retrieve selected country
 var countryId = $(this).val();
 if (countryId.length > 0) {
 // ajax call to get States from Server
 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);

Mirosław Stasiak free commented 5 years ago

Check this topic

Jawand Singh Virk free commented 5 years ago

Thanks it helped, i.e. material-select destroy and then re-initialize the list.


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



Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No