How to create Double click event on Multi-Selection Options


We have a small project need to add user into group, which is many to many relationship. So we designed two multi-selections to hold available users and existed group users. Each user is one option in the multi-selections, we want to double click user to make it move from all_users to group_users, and vice versa.

Our original code is working on each options, like below

$('#group_users option').dblclick(function() {
$("#all_users").append(new Option($(this).text(), $(this).val()));

But the issue is new appended user will not accept double click event, only page loaded user option can response to double click event.

We tried many ways to figure out how to do that, and finally, we found we can apply dbclick event on <select> itself. And then try to check each selected options to handle that. Now the issue fixed.

The new code like below, now you can move the user option between two multi-selections by double click.

$('#all_users').dblclick(function() {
$("#group_users option[value='']").remove();
$('#all_users :selected').each(function(i, selected){
$("#group_users").append(new Option($(selected).text(), $(selected).val()));

$('#group_users').dblclick(function() {
$('#group_users :selected').each(function(i, selected){
$("#all_users").append(new Option($(selected).text(), $(selected).val()));
if($("#group_users option").length == 0)
$("#group_users").append(new Option("N/A", ""));


About qianggan

Sr. Software Engineer
This entry was posted in Computers and Internet, jQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s