CODEWITHSUNDEEP
javascripthtmlflaskweb-deployment
safe
safe

Reputation: 660

Populating second drop down menu based on first drop down menu selection

I have a form with two drop down menus, I want the second drop down menu to be populated based on first selected option however the second drop menu data is populated by a REST API call.

Example: Drop down 1 is selected to be poc, a rest API call is then made to https://apiserver/api/poc and specific data is returned and is now available within drop down 2.

How can I achieve this? Front-end at the moment is HTML/CSS, JavaScript but running on Python Flask (will be looking to move to Vue/React soon). Should I use JavaScript to retrieve the data based on the drop down 1 selection from the REST API? Does anyone have examples of this?

Upvotes: 1

Views: 468

Answers (1)

Ramanpreet Singh
Ramanpreet Singh

Reputation: 143

Yes, JavaScript can be used to achieve the above-said functionality. The flow will be, first user will select a value from the first dropdown and you have to listen to onchange event on the first dropdown and make the API call in its onchange callback function. And then add the options based on the response received from API call. For adding options you have to manipulate the dom using js.

I tried to create a similar example with 3 dropdowns using static data instead of API (in your case) some time ago. I used jQuery in it. Please refer to this github link to get the idea about dom manipulation.

Upvotes: 1

Related Questions