How to update select option using ajax


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);

Screenshot

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


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: 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
Tags