move items between listboxes with javascript

Posted on 2010-01-05
Last Modified: 2012-05-08
Wondering if anyone has some knowledge to switch items bewteen listboxes using javascript so they do not have to do postbacks for the code.  her eis a smaple of what would be transfered between the 2.  When Items hit listbox 2 this is when they get saved if they press submit but they want ot be able to move items between the 2 listboxes until they get it correct and then save all itmes to the db, instead of constanly having to postback moving items between the 2.  Still working in 1.1.
ID            UIC
38           PUFAA
50           PUNNA
Question by:kdeutsch
    LVL 41

    Expert Comment

    Something like this perhaps?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <title> From To </title>
    <script type='text/javascript'>
      function moveit( id1, id2 ) {
        var sel1 = document.getElementById( id1 )
        var sel2 = document.getElementById( id2 )
        if ( sel1 && sel2 ) {
          var L1 = sel1.options.length
          var L2 = sel2.options.length
          for ( var si = L1 - 1; ( ( si > -1 ) && ( !sel1.options[ si ].selected ) ); si-- ) {
          alert( 'si = ' + si )
          var text = []
          var val  = []
          for ( var i = j = 0; i < L1; i++ ) {
            if ( i != si ) {
              text[ j ] = sel1.options[ i ].text
              val[ j++ ]  = sel1.options[ i ].value
          sel2.options[ L2 ] = new Option( sel1.options[ si ].text, sel1.options[ si ].value )
          sel1.options.length = 0
          for ( i = 0; i < text.length; i++ ) {
            sel1.options[ i ] = new Option( text[ i ], val[ i ] )
        } else {
          alert( 'error: missing id, either id="' + id1 + '" or id="' + id2 + '"' )
      <table border='1'>
            <select id='here' onchange='moveit("here","there")'>
              <option value='0'>Pick 1</option>
              <option value='1'>Uno</option>
              <option value='2'>Dos</option>
              <option value='3'>Tres</option>
            <select id='there' onchange='moveit("there","here")'>
              <option value='0'>...</option>

    Open in new window

    LVL 3

    Expert Comment


    Hello kdeutsch

    Here's what you are looking for WITH VALIDATION  using an EMAIL Form's Country Select as an example...

    If your Form's name is "Email"
    IF your select object name is "country"

    PUT THIS Javascript FUNCTION in you HEAD

    <script language="javascript">
    function makeChoice() {
        var thevalue =;;
          if (thevalue == 0) {
                alert("Please select your country.");
                return false;
          } else {
                return true;

    If your Form's name is "EmailEmail"
    IF your select object name is "country"

    name="country" onchange="makeChoice()"

    You will need a second HIDDEN field in your form to store the "currently" selected value

    LVL 6

    Accepted Solution

    check attached file

    Author Closing Comment

    Sorry forgot to accept this
    LVL 6

    Expert Comment

    not worries, Thanks for the points

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
    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…

    745 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

    15 Experts available now in Live!

    Get 1:1 Help Now