ParamQuery select a.k.a. pqSelect is jQuery select plugin used to enhance ordinary browser select lists and provides these features out of the box:

  • Virtual rendering: for small memory footprint
  • Grouping
  • Disabled options
  • Filter functionality
  • Smart key navigation
  • Checkbox selections
  • Radio buttons
  • API: options, methods and events

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' );

Install through NPM

npm i pqselect

Important Links:

Last Updated: March 23, 2022