2 list-boxes with add & remove button

Discussion in 'ASP General' started by Ramamoorthy Ramasamy, Feb 4, 2005.

  1. Hi all,

    I would like to create a page with VBscript and ASP which will contain
    two list-boxes one in the left side and the other in the right side
    with two buttons namely "Add>>" and "<<Remove" so that if the user
    selects a value listed in the left side list-box and presses "Add>>"
    then that selected value should go inside the right side list-box.
    Similarly if the user selects a value listed in the right side
    list-box and after clicking "<<Remove" then that selected value should
    go back to the left side list-box.

    Can anyone provide me the code?

    Some useful tutorial links explaining the above scenario can also be
    given.

    Any help is much appreciated and thanks in advance.

    regards,
    Ramamoorthy
    Ramamoorthy Ramasamy, Feb 4, 2005
    #1
    1. Advertising

  2. Ramamoorthy Ramasamy

    Jeff Cochran Guest

    On 3 Feb 2005 22:31:51 -0800, (Ramamoorthy
    Ramasamy) wrote:

    >I would like to create a page with VBscript and ASP which will contain
    >two list-boxes one in the left side and the other in the right side
    >with two buttons namely "Add>>" and "<<Remove" so that if the user
    >selects a value listed in the left side list-box and presses "Add>>"
    >then that selected value should go inside the right side list-box.
    >Similarly if the user selects a value listed in the right side
    >list-box and after clicking "<<Remove" then that selected value should
    >go back to the left side list-box.
    >
    >Can anyone provide me the code?


    ASP wouldn't be the proper technology for this, you'd want to do this
    on the client side. Check a VBScript or Javascript group, and keep in
    mind that VBScript has limited support on non-Windows platforms.

    Jeff
    Jeff Cochran, Feb 4, 2005
    #2
    1. Advertising

  3. Ramamoorthy Ramasamy

    craig Guest

    This is all the code you need...

    <script language="JavaScript">
    <!-- hiding
    function dosubmit() {}

    function deleteOption(object,index) {
    object.options[index] = null;
    }

    function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
    }

    function copySelected(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
    if (fromObject.options.selected)
    addOption(toObject,fromObject.options.text,fromObject.options.valu
    e);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
    if (fromObject.options.selected)
    deleteOption(fromObject,i);
    }
    }

    function copyAll(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
    addOption(toObject,fromObject.options.text,fromObject.options.valu
    e);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
    deleteOption(fromObject,i);
    }
    }


    function selectAll(fromObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
    //addOption(toObject,fromObject.options.text,fromObject.options.va
    lue);
    fromObject.options.selected = true;
    }
    }
    // stop hiding -->
    </script>




    <table width = "100%" border = "0">
    <tr>
    <td>
    <select size="15" name="ExtraAreas" class="inpt" multiple
    style="width:180">
    <%
    'call stuff from databse her
    %>
    <option value="<!-- db value -->"><!-- db value --></option>
    </select>
    </td>

    <td align = "center">
    <input type="button" value="Add &raquo; "
    onClick="copySelected(this.form.ExtraAreas,this.form.ExtraAreas1),
    dosubmit(ExtraAreas1)" class = "button">
    <input class = "button" type="button" value="&laquo; Remove"
    onClick="copySelected(this.form.ExtraAreas1,this.form.ExtraAreas),
    dosubmit(ExtraAreas)">
    </td>
    <td class = "tableNorm">
    <select size="15" name="ExtraAreas1" class="inpt" MULTIPLE
    style="width:180"></select>
    </td>
    </tr>
    </table>



    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
    craig, Feb 11, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stefan Mueller
    Replies:
    5
    Views:
    12,353
    jamesxa
    Jun 16, 2009
  2. Rocky
    Replies:
    0
    Views:
    258
    Rocky
    Nov 8, 2006
  3. Hiten
    Replies:
    1
    Views:
    609
    Vidar Petursson
    May 26, 2004
  4. Matt Kruse
    Replies:
    1
    Views:
    186
    Calan
    Apr 6, 2004
  5. Rick
    Replies:
    15
    Views:
    197
    saer sae
    Jan 12, 2006
Loading...

Share This Page