Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Clicking on list box opens control to allow adding to list

Posted on 2014-02-20
5
Medium Priority
?
386 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 27

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 83

Accepted Solution

by:
leakim971 earned 2000 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 27

Expert Comment

by:lenamtl
ID: 39877645
0
 

Author Closing Comment

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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
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.
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 dynamically set the form action using jQuery.
Suggested Courses

926 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