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
  • jQuery version 1.x, 2.x, 3.x
  • jQueryUI version: 1.11, 1.12, 1.13
  • API: options, methods and events

Single Select
​x
 
//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: December 05, 2022