html - Create a condition maker using jqueryjavascript - Stack Overflow

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 e 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?

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 e 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?

• javascript
• html
• jquery
• css

Share Improve this question Follow edited May 1, 2020 at 7:44 Anirudh Malhotra asked Apr 21, 2020 at 7:22 Anirudh MalhotraAnirudh Malhotra 16188 bronze badges 7

• this sounds more like a taglist ponent instead, with custom styling for operators. – briosheje Commented Apr 21, 2020 at 7:27
• Sorry I am noob in js, can you point me to a direction. – Anirudh Malhotra Commented Apr 21, 2020 at 10:56
• 1 This is a way too vague question for stackoverflow, just search "javascript tag list ponent" in google, you will find ton of ponents that does this. After understanding the ponent, you can e back to this post and read my above ment, you will understand what I mean. Stackoverflow is meant for specific questions, though, while your is a (quite) vague one that doesn't fit in this network. Just to help you searching a bit, you might want to use this: github./yairEO/tagify – briosheje Commented Apr 21, 2020 at 11:28
• 1 Hi thanks a lot for taking time to explain, but i think select2(mentioned in the question) can do the tag list too. Just that i didn't know the specific word for it : ) . So I can work with this but what happens is when i select something from tag list it will made as a tag. So for example "Provider Address" is selected i cannot edit it further to add (= 10.0.0.0/24) where "=" also has to e from select options. Any more help would be much appreciated @briosheje :) – Anirudh Malhotra Commented Apr 29, 2020 at 8:45
• Where is this picture ing from? Link, please. What are the requirements? It's totally unclear. Don't answer in the ments. Edit the question instead – x00 Commented Apr 30, 2020 at 16:37

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 9 +25

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/ - which use jQuery and Bootstrap.
Demo - https://querybuilder.js/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.