Topic: material select jQuery, how to append more items using jQuery with Ajax requests
Jawand Singh Virk asked 7 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 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); } }); } }); });
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Mirosław Stasiak commented 7 years ago
Check this topic https://mdbootstrap.com/support/mdb-select-create-linked-select/Jawand Singh Virk commented 7 years ago
Thanks it helped, i.e. material-select destroy and then re-initialize the list.