Search code examples
javascriptjquerynode.jsexpresspug

I want to make a category and sub category select menu in pug and node.js. Where Subcategory changes based on category selected

I know how to render a simple menu using -var={} and adding the value and names in it but for my work flow i want a category menu with categories like electronic , sports etc such that if i select sports the other sub category menu only shows different sports. I need to do it dynamically with one form and the values should change without hitting the submit button

I Tried something like this

but it only renders one menu

    -var selected=''
                    -var dic ={ 'Sports': 'Sports', 'Tech': 'Tech'};
                    select.custom-select
                        option(selected='') Open this select menu
                        for key,value in dic
                            option(value=key)=value 
                                selected=value
                    if selected==='Sports'
                        select.custom-select
                            option(selected='') Open this select menu
                            option(value='1') football
                            option(value='2') cricet
                    if selected === 'Tech'
                        select.custom-select
                            option(selected='') Open this select menu
                            option(value='1') Mobile
                            option(value='2') Tablets
Solution

  • Pug is not designed to do dynamic (reactive) page rendering. It's a domain of different JS libraries out there such as Reactjs or Vuejs. Pug is a templating engine that will render your HTML once.