В моем проекте я хочу реализовать код, где мне нужно сохранить два окна списка (asp control), и я хочу реализовать add remove как функциональность между этими двумя списками, в которых удаляется один элемент из список должен быть добавлен в другой, а сначала удалить его с другого.Пожалуйста, предложите хорошее решение
Как я могу использовать JavaScript для достижения этого эффекта? Также будут полезны любые ссылки на учебные пособия. Спасибо заранее.
Вы можете использовать исходный код, я здесь при условии, что копируется из http://www.johnwbartlett.com/CF_tipsNtricks/index.cfm?TopicID=86
<html>
<head>
<title>Multi-list copy example</title>
<body>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
var SelID='';
var SelText='';
// Move rows from SS1 to SS2 from bottom to top
for (i=SS1.options.length - 1; i>=0; i--)
{
if (SS1.options[i].selected == true)
{
SelID=SS1.options[i].value;
SelText=SS1.options[i].text;
var newRow = new Option(SelText,SelID);
SS2.options[SS2.length]=newRow;
SS1.options[i]=null;
}
}
SelectSort(SS2);
}
function SelectSort(SelList)
{
var ID='';
var Text='';
for (x=0; x < SelList.length - 1; x++)
{
for (y=x + 1; y < SelList.length; y++)
{
if (SelList[x].text > SelList[y].text)
{
// Swap rows
ID=SelList[x].value;
Text=SelList[x].text;
SelList[x].value=SelList[y].value;
SelList[x].text=SelList[y].text;
SelList[y].value=ID;
SelList[y].text=Text;
}
}
}
}
</script>
<form name="Example">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
<select name="Features" size="9" MULTIPLE>
<option value="2">Row 2</option>
<option value="4">Row 4</option>
<option value="5">Row 5</option>
<option value="6">Row 6</option>
<option value="7">Row 7</option>
<option value="8">Row 8</option>
<option value="9">Row 9</option>
</select>
</td>
<td align="center" valign="middle">
<input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br>
<br>
<input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)">
</td>
<td>
<select name="FeatureCodes" size="9" MULTIPLE>
<option value="1">Row 1</option>
<option value="3">Row 3</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Если у вас есть некоторые HTML, как это:
<select id="listBox1" size="5">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
<select id="listBox2" size="5">
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
</select>
<a href="#" id="moveLink">Move selected from list 1 to list 2</a>
Тогда следующий JQuery будет принимать выбранные элементы из списка 1 и переместить их в список 2, когда moveLink нажата.
$(function() {
$('#moveLink').click(function() {
$('#listBox1 option:selected').each(function(i, opt) {
$('#listBox2').append($('<option></option>').attr('value', opt.val()).text(opt.text());
$(opt).remove();
});
});
});
Перейдите на сайт www.jquery.com, чтобы получить библиотеку для включения в эту страницу, а также для этого.
Это может быть то, что вам нужно: http://www.dotnetspider.com/resources/21388-Add-Remove-from-one-Listbox-another-ListBox.aspx
Java или JavaScript? Кроме того, что вы пробовали до сих пор? – MvanGeest
нам понадобится гораздо больше деталей, насколько это возможно, чтобы помочь. Основное предложение, которое кто-то может дать вам на основе этого, - «научиться использовать jQuery», который может или не может быть полезным. – JAL
Я считаю, что он хочет сделать что-то вроде этого: http://jsfiddle.net/7tZ6H/ –