asp.net - Multiple select box selection + Quantity Design advice

I have a listbox that allows a user to have multiple selection and a button to transfer these selected items to another listbox, now theres a new requirement which I also need to indicate the quantity for each respective items. I can't think of a good way to handle this.

I currently have a Source items select box and a Selected items select box. Any advice on how to go about designing this feature? Thanks!

    Multiple select box           selec开发者_StackOverflow中文版ted             Quantity  
 e.g.        Eggs            --->      Eggs     --->        X 4
             Vegetables                Potato               X 5 
             Potato 

---

This was about the best idea I could come up with for your scenario:

HTML would look like this:

<table>
    <tr>
        <td>
            <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple"></asp:ListBox>
        </td>
        <td>
            <input type="button" value="--&gt;" onclick="moveOptions(<%=ListBox1.ClientID %>, <%=ListBox2.ClientID %>);" /><br />
            <input type="button" value="&lt;--" onclick="moveOptions(<%=ListBox2.ClientID %>, <%=ListBox1.ClientID %>);" />
        </td>
        <td>
            <asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
            <br />
        </td>
    </tr>
</table>

Then the code behind (to add a couple of imaginary items):

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Me.ListBox1.Items.Add(New ListItem("Eggs", 1))
            Me.ListBox1.Items.Add(New ListItem("Vegetable", 2))
            Me.ListBox1.Items.Add(New ListItem("Potatoes", 3))
        End If
    End Sub

Then the javascript:

<script language="JavaScript" type="text/javascript">
<!--

        var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);

        function addOption(theSel, theText, theValue) {
            var newOpt = new Option(theText, theValue);
            var selLength = theSel.length;
            theSel.options[selLength] = newOpt;
        }

        function deleteOption(theSel, theIndex) {
            var selLength = theSel.length;
            if (selLength > 0) {
                theSel.options[theIndex] = null;
            }
        }

        function moveOptions(theSelFrom, theSelTo) {

            var selLength = theSelFrom.length;
            var selectedText = new Array();
            var selectedValues = new Array();
            var selectedCount = 0;

            var i;
            for (i = selLength - 1; i >= 0; i--) {
                if (theSelFrom.options[i].selected) {

                    if (theSelTo.id.indexOf("ListBox2") > -1) {
                        var quantity = prompt("Please indicate the quantity of " + theSelFrom.options[i].text + " that you would like to add", 1);

                        if (quantity > 0) {
                            selectedText[selectedCount] = theSelFrom.options[i].text + "(" + quantity + ")";
                        }
                        else if (quantity == null || quantity == nan) {
                            return;
                        }
                    }
                    else {
                        selectedText[selectedCount] = theSelFrom.options[i].text.substring(0, theSelFrom.options[i].text.indexOf("("));
                    }



                    selectedValues[selectedCount] = theSelFrom.options[i].value;
                    deleteOption(theSelFrom, i);
                    selectedCount++;
                }
            }

            for (i = selectedCount - 1; i >= 0; i--) {
                addOption(theSelTo, selectedText[i], selectedValues[i]);
            }

            if (NS4) history.go(0);
        }

//-->
</script>

So basically what this does is that for each selected item in the first ListBox asks the amount with a fancy Prompt dialog, and then adds the item into the other ListBox. The effect will be the same if more than one item is selected. If the item is being moved from ListBox2 to ListBox1 it won't ask, and it will just move the item without the amount. You might want to add extra security in the server side, also you might want to check for numerical values and stuff.

Hopefully this helps man, as I said it was the best idea I could come up with real quick, but probably not the best solution.

Good luck!

Hanlet

Couple of Screenshots