Topic: How to update select option using ajax

itsupport.engineer priority asked 6 months 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 priority answered 6 months 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);

Screenshot

Thank you.


Dawid Wajszczuk staff commented 6 months 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 priority commented 6 months 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 priority commented 6 months 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 6 months ago

It is not clear for me, do you need any other help? Or is your issue resolved?


Dawid Wajszczuk staff answered 6 months 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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Priority
  • 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