How to use javascript to move an object from one list to another on the same page

I have a jsp I'm working on and I was wondering if there is an easy javascript function that can figure out which element in a list is selected and then move that element to another on the same jsp?

here is the screen shot of the jsp:

this is the code:

<% Venue v = (Venue)session.getAttribute("currentVenue"); %>
<% List<Conceptual_Package> cpList = Conceptual_PackageDAO.getInstance().getByVenue(v.getId()); %>

What Packages do you want to see?

 <form method="post" action="ttp.actions.Sale3PackAction.action">
 <select name="packid" id="packid">
     <% for (Conceptual_Package cp: cpList) { %>
    <option value="<%=cp.getId()%>"><%=cp.getN开发者_StackOverflowame1()%></option>
    <% } %>


 </select>

    <input type="button" value="  next  " onclick="getSeats();"/>

    </form>


<!--new-->


Available Seats:

 <select name="eventSeatid" size="10" id="aSeats">

<!--    <option value="aSeats"></option>-->

 </select>


    <input type="button" value="  Add  "/>


Selected Seats:
 <form method="post" action="ttp.actions.sale4Action.action">
     <select name="eventSeat2id" size="10" id="seat2">


     <option value="seat2"></option>




 </select>

    </form>

Not tested it, but something along the lines of

var option = document.getElementById("....").parentElement.removeChild;
document.getElementsByName("seat2")[0].appendChild(option);

If you go to the SELECT field using the browser DOM, one of the fields available will be a array of Option. Each option has a value and a text to show. Just create the option to show in the new list. In the old list, set it to NULL (or move later items in the array a position before).

BTW, this has nothing to do with java or jsp.