paramquery / select

jQuery select plugin

jQuery multiple select plugin based on jQueryui widget design

ParamQuery Select a.k.a. pqSelect

Copyright (c) 2015-2022 Paramvir Dhindsa

Released under GPL v3 license

ParamQuery select is jQuery select plugin which converts ordinary multiple and single select lists created with <select multiple="multiple"> and <select> HTML tags into theme ready jQueryUI widget. It supports virtual rendering to load tens of thousand of records without loss of performance.

1. API

2. Demos or Examples

Dependencies:

jquery >= 1.7.0 jqueryui >= 1.9.2

Features:

1. Checkboxes with options in multiple select lists.

2. Radio buttons with options in single select lists.

3. Search box.

4. Support for grouping via optgroup tag.

5. Support for disabled options via disabled attribute.

6. Keyboard navigation.

7. Collision/Edge detection.

8. Bootstrap support. (v1.3.0)

9. Theme roller ready.

10. AMD support. (v1.3.0)

11. Supports major browsers e.g., Edge, Chrome, Firefox, Safari, Opera.

select's Issues

Source code has mixed newline styles which makes it hard to create clean diff

I'm trying to prepare a pull request, but because of mixed newline styles in the original source code I cannot make a clean diff (i.e. each line is seen as difference). Can you please fix this?

To make it a file with proper Unix newlines you can do something like: cat pqselect.dev.js | tr '\r' '\n' > pqselect.dev.js.proper

Thanks!

Multi-select Arrow Float 1.3.2

I have jQuery to just add a down arrow to a multi-select.

jq("[name='OngoingServices_worktypes[] '").prepend(
	'<span class=\"ui-icon ui-icon-triangle-1-s\"></span>'
);

I updated 1.2 to 1.3.2. Now arrow and text are on two lines. I fixed it though with this CSS.

.ui-icon-triangle-1-s {
	float: right;
}

There is a strange blue box (at the bottom of the list) when search is false

Apply this css as a fix.

.pq-select-popup-cont {
outline:none;
}

pqselect not working on mobile ...!!!

Hi,

I have use pqselect plugin in my project, it worked good rather great but there is one problem I have found in this plugin that search is not supported on mobile. When I try to search every time I touch on Search text box mobile keyboard appeared as soon as keyboard appeared select box disappeared.

Thanks,

Ranjeet Puri

Add an extra class to select button when when expanded

It would be great to add an extra class to select button (.pq-select-button) when expanded.

How to implement reset button behaviour?

Hello,

I have a reset button (button[type=reset]) and want to clear all selections on click. Is that possible? How?

Thanks in advance.

Refresh and Refresh data taking huge time

hi All,
as in my usage i am having more then 10000 items as option in multi select Check box list ,
refresh method taking near about 8 to 10 seconds to refresh on UI which hangs the UI .

Please suggest on the same .

Thanks :)

Set Default Data on Load and Select all Items of a Group

Hi,
is it possible to add 2 new methods/functions which

• set preselected Items (Default checked) of an Multiple Selectbox (on page load)
• get a click event on the groupname to select/deselect all items of a group

This would be very nice.
Greetings
Spoint

needs a way to custom style everything.

Make the plugin custom styleable. As it stands now, I can't change the styling without changing it inline in the plugin js file.

Extract all the styling strings (css classes) into the options object.
Default options will have default styling strings.
Can pass in custom styling classes.

use jquery/javascript in pqselect

Dear everyone,

I have used pqselect for my website. It works very good but I have 2 question need your help.

First, how can i disable several option?
Second, how can i select several option after select control was created?

This's my jquery code:

$("#selectUserSameRole").append(optListUser); //variable "optListUser " I get from server.
$("#selectUserSameRole").pqSelect({
multiplePlaceholder: '-- Select user --',
checkbox: true //adds checkbox to options
}).on("change", function(evt) {
var val = $(this).val();
document.getElementById('lstSelectedSameRole').value = val;
}).pqSelect('open');

Tks all.

Setting the maxDisplay property to 0

Setting the maxDisplay property to 0 doesn't work.

It gets back to the default value (4). I had to set the default value to 0 in order to get the desired behaviour, but it would be nice if 0 would be just accepted as an option, instead of considering it as not specified.

Requirejs dependencies

Hi there, thanks so much for this beautiful widget!

I'm a requirejs user, and I'm struggling to understand how to resolve the jqueryui dependencies you list in your call to define:

if ( typeof define === "function" && define.amd ) {
        define( [
            "jquery",
            "jui/core",
            "jui/widget",
            "jui/position"
        ], factory );
    } else {
        factory( jQuery );
    }

"jquery" is not a problem, but I'm confused about "jui". I installed jqueryui via bower, and I don't have "jui" anywhere in my directory structure. How does one deal with this? Am I required to have that kind of directory structure? Am I supposed to do something with my "paths" setting in my call to requirejs.config? Something with shims?

Any help greatly appreciated.

unable to search columns when openthe pqgrid in bootstrap modal popup

unable to modify columns selection with text search input while using in modal popup. please check attached image, when open the toolbar column selection popup text box not able to edit and modal popup close button only focusing

Needs more events

Such as when closing and opening the popup menu. Otherwise a great library. Kudos.

XSS vulnerability

Hi.
Our pentesters discovered a Cross Site Scripting vulnerability that I was able to trace back to pqselect.

If you set one of the option's names in multiselect to something like that:

somevalue%27%22%3E%3C%2Ftextarea%3E%3Ch1+onclick%3Dalert%28document.domain%29%3EXSS1

unescaped version:

somevalue'"></textarea><h1 onclick=alert(document.domain)>XSS1

PQSelect will generate the unescaped version that can be executed. That is because it uses innerText instead of innerHtml (.text() vs .html() in jquery).

I'll be submitting a pull request.

Help! How do I contribute?

I forked your repo and made some changes. And ran into the following issues..

• When I look at the diff, it goes crazy with a full file changes with the line endings. Apparently the line endings are CRLF and I'm in Mac and it's trying to change to LF.
• How do I minify the dev version?

Uncheck option 'all option' when remove option on tag list

When retiring an element by the list of tags, the option "all options" does not uncheck.

How fix:

	$button.on({
			click: function(evt) {
				if(o.disabled) return;
				var $parent = $(this).parent('.pq-select-item'),
					indx = parseInt($parent.attr("data-id"));
				that.select(indx, false);
				that.setText();
				that.focus();
				that.triggerChange();
				that.setSelectAllState();// fix here line 112
				return false;
			}
		}, '.pq-item-close');