How to update select option using ajax

Topic: How to update select option using ajax

itsupport.engineer priority asked 2 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

Add comment

itsupport.engineer priority answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

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 2 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 priority commented 2 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 priority commented 2 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 2 years ago

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

Add comment

Dawid Wajszczuk staff answered 2 years ago

1 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

itsupport.engineer

45Support score
3Questions 2Answers 1Snippets