Create a condition maker using jquery/javascript

Question

I want to make a condition maker like in the I have tried multiple select input boxes. selectize select2 but nothing seems to fit the requirements.

• The condition like in the image a dropdown should show LHS operands, operator shall also come from another dropdown.
• After that the RHS may be written manually.
• But one single condition should look like one tag, which can be edit later if user wants to.

Any help?

Answer 1

What you're trying to build is known as a Query Builder.
There are lots of query builders whose tags and list of conditions can be customized based on your needs.

One of them is - https://querybuilder.js.org/ - which use jQuery and Bootstrap.
Demo - https://querybuilder.js.org/demo.html

Here's an Angular Query Builder (my personal favorite due to the amount of customization you can do in this widget) - https://zebzhao.github.io/Angular-QueryBuilder/demo/

Hope that helps.