asp.net - 多個選擇框選擇+數量設計建議

Question

我有一個列表框，允許用戶有多個選擇和一個按鈕將這些選定的項目轉移到另一個列表框，現在這是一個新的要求，我還需要指出每個相應的項目的數量。 我想不出一個處理這個的好方法。

我目前有一個Source items選擇框和一個Selected items選擇框。 有關如何設計此功能的任何建議？ 謝謝！

    Multiple select box           selected             Quantity  
 e.g.        Eggs            --->      Eggs     --->        X 4
             Vegetables                Potato               X 5 
             Potato 

Answer 1

這是我為你的場景提出的最好的想法：

HTML看起來像這樣：

<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>

然后是代碼（添加幾個想象的項目）：

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

那么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>

所以基本上它的作用是，對於第一個ListBox中的每個選定項目，使用花哨的“提示”對話框詢問數量，然后將該項添加到另一個ListBox中。 如果選擇了多個項目，效果將相同。 如果項目正從ListBox2移動到ListBox1，它將不會詢問，它只會移動沒有金額的項目。 您可能希望在服務器端添加額外的安全性，也可能需要檢查數值和內容。

希望這有助於男人，正如我所說，這是我能想到的最好的主意，但可能不是最好的解決方案。

祝好運！

Hanlet

截圖夫婦