Solved

Clicking on list box opens control to allow adding to list

Posted on 2014-02-20
5
365 Views
Last Modified: 2014-03-03
I am developing an asp.net 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.
0
Comment
Question by:canuckconsulting
  • 2
  • 2
5 Comments
 
LVL 24

Expert Comment

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

There is a jQuery for this
http://jqueryui.com/sortable/#connect-lists

It is also possible with HTML5
http://farhadi.ir/projects/html5sortable/

Both are easy to implement
0
 

Author Comment

by:canuckconsulting
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.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39877614
Test page : http://jsfiddle.net/L9VhF/

    <select id="listbox" multiple="multiple">
        <option>red</option>
        <option>green</option>
        <option>blue</option>
        <option>pink</option>
    </select>

<div id="dialog">
    <select id="a" multiple="multiple">
    </select>
    <table>
        <tr><td><button id="pop">>></button></td></tr>
        <tr><td><button id="push"><<</button></td></tr>
    </table>
    <select id="b" multiple="multiple">
        <option>red</option>
        <option>green</option>
        <option>blue</option>
        <option>pink</option>
    </select>
</div>

Open in new window


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

Open in new window

0
 
LVL 24

Expert Comment

by:lenamtl
ID: 39877645
0
 

Author Closing Comment

by:canuckconsulting
ID: 39901253
worked perfectly...thanks!
0

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