What is this form element called and how to do it

Answer 1

It's called <select>

<select name="myName" size="5">
    <option value="v1">val1</option>
    <option value="v2">val2</option>
    <option value="v3">val3</option>
</select>

As for moving the items between two controls you need to remove one option from the first select box and append it to the second one. This must be done by JavaScript.

Answer 2

You would have two <select>'s with a button in the middle. on button click you would use javascript to move the selected ones to the second <select>

Answer 3

You could use the jquery crossSelect plugin to do most of the work for you.

Answer 4

Some call it a DualListBox and here is some jquery to get it to work...this example actually has buttons to move items back and forth between the listboxes.

JQUERY

  $(document).ready(function() {
    $(".btnright").click(function() { $('select[name=ListBox1] option:selected').appendTo('.ListBox2'); });
    $(".btnleft").click(function() { $('select[name=ListBox2] option:selected').appendTo('.ListBox1'); });
});

---

ASP code (but can just use html buttons and select boxes)

  <div>
        <asp:ListBox ID="ListBox1" CssClass="ListBox1" runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
            <asp:ListItem>6</asp:ListItem>
            <asp:ListItem>7</asp:ListItem>
        </asp:ListBox>
        <asp:ListBox ID="ListBox2" CssClass="ListBox2" runat="server">
            <asp:ListItem>8</asp:ListItem>
            <asp:ListItem>9</asp:ListItem>
            <asp:ListItem>10</asp:ListItem>
        </asp:ListBox>
        <br />
        <span class='btnleft'><<< Left </span>&nbsp;&nbsp;&nbsp;&nbsp; <span class='btnright'>Right
            >>> </span>