#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 за идею! Попробую это сделать и дам вам знать, соответствует ли это моему сценарию.