Filter Select Options

The Filter Select Options is one or multiple dropdown list that contains select options. Any select action will trigger a selectHandler JavaScript function that will filter out the selected options, and then update the page content accordingly (usually through an AJAX request).

This widget is inspired by Nordstrom that has a live example of the option filter.

Demo & source code  (Release v2015.12.5)


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>
You may have noticed that the script is very similar to the ddmenu script. You are right. The Filter Selects is extended from the ddmenu script. If you want to know more about each filter options inside the ddmenu-ext.js, you can refer to the ddmenuOptions in ddmenu.

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:

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.

4. License:    

More ...



Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.