Topic: material select jQuery, how to append more items using jQuery with Ajax requests
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.