Solved

Display Selected Options in Multiple Select Dropdown

Posted on 2012-04-11
3
369 Views
Last Modified: 2012-04-11
When a user selects an option from a multiple select dropdown, I'd like beside it or above it to list what has been selected. Alternatively, I'd like to hide it when it is "unselected". Is this possible?

<select name="requestorName" multiple="multiple">
    				
                		<option value="015339">Andrusyszyn, Lawrence</option>
                	
                		<option value="002816">Bailey, Lisa</option>
                	
                		<option value="004723">Baylor, Becke</option>
                	
                		<option value="014398">Brigida, Arthur</option>
                	
                		<option value="013670">Brown, Alicia</option>
                	
                		<option value="014136">Campbell, Christiana</option>
                	
                		<option value="015750">Cannon, Nina</option>
                	
                		<option value="015760">Castonguay, William</option>
                	
                		<option value="003553">Cooper, Donna</option>
                	
                		<option value="015535">Donovan, Brian</option>
                	
                		<option value="009813">Dries, Paul</option>
                	
                		<option value="016827">Echeverria, Patricia</option>
                	
                		<option value="009977">Enichen, Don</option>
                	
                		<option value="004161">Eubanks, Carol</option>
                	
                		<option value="003602">Eubanks, Linda</option>
                	
                		<option value="003090">Faucette, David</option>
                	
                		<option value="018604">Forrester, Tammy</option>
                	
                		<option value="000987">Fuller, Joyce</option>
                	
                		<option value="003196">Gilliland, Lisa</option>
                	
                		<option value="014545">Goldberg, Barbara</option>
                	
                		<option value="019188">Hepler, Eric</option>
                	
                		<option value="016238">Keyes, Ann</option>
                	
                		<option value="009924">Lee, Sarah</option>
                	
                		<option value="010588">Lilje, Jennifer</option>
                	
                		<option value="019495">Morales, Jason</option>
                	
                		<option value="019701">Odom, Jeffrey</option>
                	
                		<option value="019801">Olale, Linda</option>
                	
                		<option value="000943">Parker, Carolyn</option>
                	
                		<option value="016401">Passwaters, Stacey</option>
                	
                		<option value="013250">Perry, Lisa</option>
                	
                		<option value="012366">Ranghel, Susana</option>
                	
                		<option value="004194">Rodrigues, Claire</option>
                	
                		<option value="019640">Sanchez, Diana Perez</option>
                	
                		<option value="014160">Sattar, Abrar</option>
                	
                		<option value="016398">Scott, Jeffrey</option>
                	
                		<option value="015632">Sheets, Robin</option>
                	
                		<option value="019663">Smith, Jackie</option>
                	
                		<option value="010143">Stratton, David</option>
                	
                		<option value="003437">Strowd, Richard</option>
                	
                		<option value="008439">Walker, Nicole</option>
                	
                		<option value="008815">Weinzapfel, Timothy</option>
                	
                		<option value="019019">Williams, Jacquelin</option>
                	
                		<option value="018935">Withers, John</option>
                	
                		<option value="019434">Wooten, Linda</option>
                	
            	</select>
            

Open in new window

0
Comment
Question by:traport
3 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 37832857
Try this jsfiddle.

$("select").change(function() {
    $("#selected").empty();
    $("option:selected", this).each(function() {
        $("#selected").append($("<li/>").text($(this).text()));

    });
});

Open in new window

0
 

Author Closing Comment

by:traport
ID: 37833555
Really cool - I haven't used jfiddle - and this worked beautifully. Thank you!
0
 
LVL 52

Expert Comment

by:_agx_
ID: 37833625
Nice one Proculopsis :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 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

24 Experts available now in Live!

Get 1:1 Help Now