Topic: How to update select option using ajax
itsupport.engineer pro premium priority asked 3 years ago
Hi,
I do not find a way to update select options using jQuery or Javascript. I want to update dropdown items using ajax based on selected parent dropdown.
Is they anyone who can help me?
Thanks Parth
itsupport.engineer pro premium priority answered 3 years ago
Hi,
Thank you for reply.
I have tried that code but still problem. It generated two dropdown.
const select = document.querySelector('#client');
const option = document.createElement('option');
option.value = 1;
option.innerText = "option 1";
select.appendChild(option);
const mySelect = new mdb.Select(select);
Thank you.
Dawid Wajszczuk staff commented 3 years ago
It's probably due to double initialization of the Select component. You probably used select
class. You can remove that class or dispose current select and make new instance. You can try something like this https://mdbootstrap.com/snippets/standard/d-wajszczuk/3957452#js-tab-view
itsupport.engineer pro premium priority commented 3 years ago
Thank you very much, that works but suppose i have lots of select items in ajax so should i do a loop for this code.
Basically i want to replace sub dropdown all options based on parent selected.
itsupport.engineer pro premium priority commented 3 years ago
I found solution, i can use below code for that.
/* This code works but it create two dropdowns, */const select = document.querySelector('#client');
const removeChilds = (parent) => { while (parent.lastChild) { parent.removeChild(parent.lastChild); }};// remove all child nodesremoveChilds(select);
Dawid Wajszczuk staff commented 3 years ago
It is not clear for me, do you need any other help? Or is your issue resolved?
Dawid Wajszczuk staff answered 3 years ago
Hi,
Here is the snippet showing how to add options via JS https://mdbootstrap.com/snippets/standard/d-wajszczuk/3532677#js-tab-view.
Keep coding,
Dawid
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No