ParamQuery select a.k.a. pqSelect is an open source jQuery select plugin that converts ordinary multiple and single select lists created with <select multiple="multiple"> and <select> HTML tags into theme ready jQueryUI widget with support for grouping via <optgroup> tag, disabled options via <option disabled="disabled"> attribute and supplemented with the functionality to add checkboxes to multiple select lists, radio buttons to single select lists, search box to search options, keyboard navigation (up, down, page Up, page Down, etc) and many options, methods and events. It's theme ready and supports edge detection out of the box. ParamQuery Select can be used in open source or commercial applicatons for free under GNU GPL v3 license terms.

Single Select

//initialize the pqSelect widget. $("#select0").pqSelect({ singlePlaceholder: 'Select Country', radio: true //adds radio buttons }).on("change", function(evt){ var val = $(this).val(); $("#selected_option0") .text("Selected option: "+val); }).pqSelect( 'open' );

Multiple Select

//initialize the pqSelect widget. $("#select1").pqSelect({ multiplePlaceholder: 'Select Countries', checkbox: true //adds checkbox to options }).on("change", function(evt){ var val = $(this).val(); $("#selected_option1") .text("Selected option: "+val); }).pqSelect( 'open' );

Grouping in Select

//initialize the pqSelect widget. $("#select2").pqSelect({ deselect: false }).pqSelect( 'open' );

Multiple Select with grouping

//initialize the pqSelect widget. $("#select3").pqSelect({ multiplePlaceholder: 'Select Regions', checkbox: true //adds checkbox to options }).pqSelect( 'open' );

Disabled options in select

//initialize the pqSelect widget. $("#select4").pqSelect({ multiplePlaceholder: 'Select Countries', checkbox: true //adds checkbox to options }).pqSelect( 'open' );

Important Links:

Last Updated: Nov 10, 2016