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>

所以基本上它的作用是，对于第一个ListBox中的每个选定项目，使用花哨的“提示”对话框询问数量，然后将该项添加到另一个ListBox中。如果选择了多个项目，效果将相同。如果项目正从ListBox2移动到ListBox1，它将不会询问，它只会移动没有金额的项目。您可能希望在服务器端添加额外的安全性，也可能需要检查数值和内容。

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

祝你好运！

Hanlet

一些截图 Asking for Quantity Displaying the Quantity

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

1 个答案: