Bootstrap select dropdown with collapsable sub options - javascript

I am trying to achieve bootstrap select drop-down with collapsible sub options.
for example : The select drop-down should display the OPTION as "Vehicle", "House" etc. where in the option Vehicle will have further sub options as "2-Wheeler" "3-wheeler" and "4-wheeler". These sub-options should be collapsible and only should show when the user clicks on the main option (i.e. Vehicle). And so the user will be able to select only from the sub-options.
Similarly, for the case of House - the collapsible sub options should allow user to select any of the options like "2-BHK","3-BHK","4-BHK".
I tried many ways, but couldn't achieve it exactly. Any suggestions would be highly appreciated !!

Related

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
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.

Wordpress - Drop Down Menu auto select using button

Hey guys I'm wondering if the below is possible in WordPress based on the scenario, also these are the plugins I'm using Contact Form 7 and Contact Form 7 Conditional Fields:
I have 3 pages:-
Page A which has a list of products.
Page B which is a single product that would've been clicked on from Page A and also has a button that leads to Page C.
Page C which is basically a contact page with 2 conditional field groups where the user can either select "General Question" or "Product Inquiry". After one of the two options is selected, a set of fields will appear respective to the option selected. When the "Product Inquiry" in particular is selected, another drop-down list will appear which has the list of products in which the user will choose which product they're inquiring about.
So what I want to know is if there is a way that when the user clicks on the button from Page B and it then goes to Page C, how can it automatically choose the "Product Inquiry" drop-down option and then select the same product from which they came on the list of products drop-down that has now appeared? I want to lessen the manual work for the user.
I'm thinking maybe the button could work like some sort of accordion select where you just set the #id of the accordion you want to open in the hyperlink/url.
Any thoughts would be great, thanks.
You can set a $_GET. Let's say you have products: "Ball", "Bat", and "Gloves". Here's an example:
<button>Click here for ball</button>
<button>Click here for bat</button>
<button>Click here for gloves</button>
Then in your Contact Form 7 form settings, you would have something like this:
[select* menu-10 default:get "Ball" "Bat" "Gloves"]
You would obviously change menu-10 to whatever your menu ID is.

Javascript for showing/hiding flagged options in dropdown menu

I am trying to write a Javascript for a drop down menu on my JSP page. Basically, The drop down retrieves a bunch of options from a database query, and the options are sorted by a flag in the query (1 or 0). So the options at the top of the dropdown menu are all the options with 1, and below that are all the options with 0.
What I would like to do is only show the options flagged as 1 upon clicking on the dropdown, and then at the bottom of that list of options, have a "show hidden options" option that the user can click to show the rest of the options (the ones flagged as 0).
Does anyone have any ideas for how to achieve this?
Thank you

Change content within a dropdown On Select

I have a page in which the user needs to select a product based on drop down filtering. Consider four drop downs Category--> SubCategory-->Product---> Variant. Its not so user friendly when the user has to select value from each drop down to get the final variant. So I need to select all the values with a subnavigation within a single drop down. You can view what I mean in this link -- http://i.stack.imgur.com/YMoQX.gif
Please tell me how to do this.
I think you can split in three columns and using radio button group in each column to select category or product, filtering in each column

Multiple DropDown with similar options and each Drop down with a Dynamic child DropDown

There are 5 parent dropdown select box (1,2,3,4,5) with similar options(A,B,C). Each parent dropdown list has a dynamic child dropdown select box with 2 options(true,false). Each options in parent dropdown can be selected twice with corresponding child options. If both the child options are selected for a particular parent dropdown then the parent dropdown should be removed in rest of dropdown select box . Kindly suggest how to remove Selected options using Javascript and HTML.
Thanks in Advance

Categories

Resources