Solved

Clicking on list box opens control to allow adding to list

Posted on 2014-02-20
5
380 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 25

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 25

Expert Comment

by:lenamtl
ID: 39877645
0
 

Author Closing Comment

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

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

632 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