asp.net — Множественный выбор поля выбора Рекомендации по дизайну количества

#javascript #asp.net #vb.net

#javascript #asp.net #vb.net

Вопрос:

У меня есть список, который позволяет пользователю иметь множественный выбор, и кнопка для переноса этих выбранных элементов в другой список, теперь есть новое требование, в котором мне также нужно указать количество для каждого соответствующего элемента. Я не могу придумать хорошего способа справиться с этим.

В настоящее время у меня есть поле выбора исходных элементов и поле выбора выбранных элементов. Есть какие-нибудь советы о том, как приступить к разработке этой функции? Спасибо!

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

Комментарии:

1. Попробуйте использовать GridView или что-то еще.

2. @user415795, я, вероятно, буду использовать list ( <ol> / <ul> ) для выбранных элементов, поскольку это обеспечит мне гибкость макета / разметки. Но тогда также потребуется java-скрипт для разрешения выбора и т. Д.

Ответ №1:

Это была лучшая идея, которую я мог придумать для вашего сценария:

HTML будет выглядеть так:

 <table>
    <tr>
        <td>
            <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple"></asp:ListBox>
        </td>
        <td>
            <input type="button" value="--amp;>" onclick="moveOptions(<%=ListBox1.ClientID %>, <%=ListBox2.ClientID %>);" /><br />
            <input type="button" value="amp;<--" 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" amp;amp; 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, он не будет запрашивать, а просто переместит элемент без указания суммы. Возможно, вы захотите добавить дополнительную безопасность на стороне сервера, также вы можете захотеть проверить числовые значения и прочее.

Надеюсь, это поможет человеку, как я уже сказал, это была лучшая идея, которую я мог придумать очень быстро, но, вероятно, не лучшее решение.

Удачи!

Hanlet

Пара скриншотов Запрос количества
Отображение количества

Комментарии:

1. Спасибо Hanlet за идею! Попробую это сделать и дам вам знать, соответствует ли это моему сценарию.