نقل العناصر في مربعات سرد المزدوج
-
03-07-2019 - |
سؤال
وكيف يمكنني نقل العناصر من عنصر تحكم مربع قائمة واحدة للسيطرة على مربع القائمة آخر باستخدام الجافا سكربت في ASP.NET؟
المحلول
وهذا الرمز يفترض أن يكون لديك مرساة أو من شأنها أن تؤدي إلى حركة عندما يتم النقر عليه:
document.getElementById('moveTrigger').onclick = function() {
var listTwo = document.getElementById('secondList');
var options = document.getElementById('firstList').getElementsByTagName('option');
while(options.length != 0) {
listTwo.appendChild(options[0]);
}
}
نصائح أخرى
إذا كنت راضيا لاستخدام مسج، انها جدا وبسيطة جدا.
$('#firstSelect option:selected').appendTo('#secondSelect');
وأين #firstSelect هو معرف مربع حدد.
ولقد تضمنت سبيل المثال العمل هنا:
http://jsbin.com/aluzu (وإلى تعديل: <لأ href = "HTTP: // jsbin.com/aluzu/edit "يختلط =" noreferrer "> http://jsbin.com/aluzu/edit )
وحل مكتبة مستقلة:
function Move(inputControl)
{
var left = document.getElementById("Left");
var right = document.getElementById("Right");
var from, to;
var bAll = false;
switch (inputControl.value)
{
case '<<':
bAll = true;
// Fall through
case '<':
from = right; to = left;
break;
case '>>':
bAll = true;
// Fall through
case '>':
from = left; to = right;
break;
default:
alert("Check your HTML!");
}
for (var i = from.length - 1; i >= 0; i--)
{
var o = from.options[i];
if (bAll || o.selected)
{
from.remove(i);
try
{
to.add(o, null); // Standard method, fails in IE (6&7 at least)
}
catch (e)
{
to.add(o); // IE only
}
}
}
}
وHTML
<select id="Left" multiple="multiple" size="10">
<option>Some</option>
<option>List</option>
<option>Of</option>
<option>Items</option>
<option>To</option>
<option>Move</option>
<option>Around</option>
</select>
<div id="Toolbar">
<input type="button" value=">" onclick="Move(this)"/>
<input type="button" value=">>" onclick="Move(this)"/>
<input type="button" value="<<" onclick="Move(this)"/>
<input type="button" value="<" onclick="Move(this)"/>
</div>
<select id="Right" multiple="multiple" size="10">
</select>
وCSS (على سبيل المثال)
select { width: 200px; float: left; }
#Toolbar { width: 50px; float: left; text-align: center; padding-top: 30px; }
#Toolbar input { width: 40px; }
اختبار سريع FF3 وIE6 & 7 فقط.
لا تنتمي إلى StackOverflow