Clicking on list box opens control to allow adding to list

Posted on 2014-02-20
Last Modified: 2014-03-03
I am developing an application where there are several listboxes I need users to make selections in.   I would like it so that when the user clicks on the box (or perhaps a button beside the box) a pop up allows the user to add and remove items as follows.

Here is the list box in its normal state:

List box Normal
When the user licks into the box the following pops up allowing for changes:

Listbox selection control
Clicking off this control will return the user to the page and the target listbox control will reflect the changes.

I have seen this in action but can't find one to give as an example.
Question by:canuckconsulting
  • 2
  • 2
LVL 24

Expert Comment

ID: 39877019
Hi, maybe you can use Drag and Drop feature

There is a jQuery for this

It is also possible with HTML5

Both are easy to implement

Author Comment

ID: 39877029
Thanks but not quite what I'm after.  

The page it is on is very busy so I'm trying to conserve space.  I need the listbox  to kind of expand out to include a selection box when it is clicked.  This way the space is used when it is needed but once the selection is made only the selected items are shown.
LVL 82

Accepted Solution

leakim971 earned 500 total points
ID: 39877614
Test page :

    <select id="listbox" multiple="multiple">

<div id="dialog">
    <select id="a" multiple="multiple">
        <tr><td><button id="pop">>></button></td></tr>
        <tr><td><button id="push"><<</button></td></tr>
    <select id="b" multiple="multiple">

Open in new window

jQuery(function($) {
    $("#listbox").click(function(evt) {
        $("option", this).each(function() {
            var text = $(this).text();
            $("option", "#b").filter(function() { return $(this).text() == text; }).remove();
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
        close: function(event, ui) {
            $("option", "#a").each(function() {
            $("option", "#a").appendTo("#b");
    $("#pop").click(function() {
        $("option:selected", "#a").appendTo("#b");
    $("#push").click(function() {
        $("option:selected", "#b").appendTo("#a");

Open in new window

LVL 24

Expert Comment

ID: 39877645

Author Closing Comment

ID: 39901253
worked perfectly...thanks!

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now