javascript - asp.net - 多个选择框选择+数量设计建议

Question

我有一个列表框，允许用户进行多项选择，还有一个按钮将这些选定的项目转移到另一个列表框，现在有一个新的要求，我还需要指出每个项目的数量。我想不出一个好的方法来处理这个问题。

我当前有一个源项目选择框和一个选定项目选择框。关于如何设计此功能有什么建议吗？谢谢!

    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>

基本上，它的作用是，对于第一个列表框中的每个选定项目，使用一个精美的提示对话框询问金额，然后将该项目添加到另一个列表框中。如果选择多个项目，效果将相同。如果将该项目从 ListBox2 移动到 ListBox1，它不会询问，并且只会移动该项目，而无需输入金额。您可能想在服务器端添加额外的安全性，也可能想检查数值和其他内容。

希望这对人有帮助，正如我所说，这是我能快速想出的最好的主意，但可能不是最好的解决方案。

祝你好运!

汉莱特

几个屏幕截图