Filter Select Options
This widget is inspired by Nordstrom that has a live example of the option filter.
- Single or multi select dropdown
- Open the dropdown by hover or click
- Cross platform and browser support
- License Fee: $190.00
We'll charge more ($50/Hr) if more customizations are required.
1. Add script links
<!-- add the links into the head section of the page --> <link href="res/ddmenu-ext.css" rel="stylesheet" type="text/css" /> <script src="res/ddmenu-ext.js"></script>
2. Add the dropdown markup
The markup is very similar to the ddmenu structure. For details please refer to the demo.html code in the download package.
3. Implementing the selectHandler
The selectHandler function will be triggered when any options are selected/deselected in the dropdown. It will also excute when the dropdown list is just initiated during page load.
Two parameters, opWrapper and selectedBs, are passed to the selectHandler function:
- opWrapper: It is the clicked <div class="dd-inner op-wrapper">...</div> element which has 4 properties: filterId, bs(the collection of its <b>s), viewall(the b.viewall element), and the chosenFilter wrapper element that contains the chosen filters (The chosenFilter is inserted into the ddmenu by the script, just before the <div class="dropdown">...</div> element).
- selectedBs: The selected options (the <b>s) within the dropdown list (opWrapper)
You may have noticed the var myFilter = new Ddmenu_Extended(filterOptions); in the ddmenu-ext.js. myFilter is the instance name of the widget. It has a property, opWrappers, that returns all of its <div class="dd-inner op-wrapper">...</div> elements. We can iterate this collection to filter out all the chosen options.
For details please refer to the source code of the demo.html inside the download package.