如何在不使用javascript更改顺序的情况下在select中移动多个值 [英] how to move multiple value in select without changing the order using javascript
本文介绍了如何在不使用javascript更改顺序的情况下在select中移动多个值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2个具有多个选定选项的选择.
必须在不改变订单的情况下从另一个转移价值，
例如，我有10个值.首先我移动9个值，然后再移动2个值
i ve 2 select with multiple selected option.
have to move value from another without change the order,
eg, i have 10 value. first i move 9 value then i move 2 value
it''llbe store 2 value then 9 value likewise
推荐答案
简单的答案是-只需确保以正确的顺序移动它们即可.
一个选项(对不起！)是向select元素中的每个option元素添加一个新属性.
您可能希望添加一个称为(例如)"origIndex"的属性-除了将一项从一个列表移动到另一个列表时保持相同的顺序，该属性仅用于其他用途.
当需要移动一个项目时，您只需获取srcItem的origIndex值即可.然后，您遍历destList中的选项，并且当所检查的项目的origIndex高于要移动的项目时，您只需使用第二个Select元素的insertBefore方法即可.
这是一些可以做到的代码.经过镀铬测试.
The simple answer is - just make sure you move them in the right order.
An option (pardon the pun!) is to add a new attribute to each option element in the select element.
You may wish to add an attribute called (say) ''origIndex'' - this will be used for nothing other than maintaining the same order when an item is moved from one list to another.
When it comes time to move an item, you simply get the srcItem''s origIndex value. You then go through the options in the destList and when the item being examined has a origIndex that is higher than the item being moved you just use the insertBefore method of the 2nd Select element.
Here''s some code that will do it. Tested in chrome.
<!DOCTYPE html>
<html>
<title>Dialog Page</title>
<head>
<script>
function byId(e){return document.getElementById(e);}
function makeList(strListId, numOptions)
{
var sel, opt, i, x;
sel = document.createElement('select');
sel.setAttribute('id', strListId);
for (i=0; i<numOptions; i++)
{
x = Math.floor(Math.random() * 100);
opt = document.createElement('option');
opt.appendChild(document.createTextNode(x) );
opt.setAttribute('name', x );
opt.setAttribute('origIndex', i);
sel.appendChild(opt);
}
return sel;
}
function moveSelected(idListSrc, idListDest)
{
// 1. get src and dest lists
src = byId(idListSrc);
dest = byId(idListDest);
// check to see if an item is selected
selIndex = src.selectedIndex;
if (selIndex != -1)
{
selectedElement = src.options[selIndex];
sortedInsert(dest, selectedElement);
}
// if not, there are no options left in list1. Show a message
else
{
alert('No option selected');
}
}
function sortedInsert(destList, elementToAdd)
{
var numOptions, i, addIndex, curIndex;
numOptions = destList.options.length;
if (numOptions > 0)
{
addIndex = parseInt(elementToAdd.getAttribute('origindex'));
for (i=0; i<numOptions; i++)
{
curIndex = parseInt(destList.options[i].getAttribute('origindex'));
if (addIndex < curIndex)
{
destList.insertBefore(elementToAdd, destList.options[i]);
return;
}
}
destList.appendChild(elementToAdd);
}
else
destList.appendChild(elementToAdd);
}
function myInit()
{
parent = byId('holder1');
parent.appendChild(makeList('list1', 10));
btn = document.createElement('button');
btn.setAttribute('id', 'moveBtn');
btn.appendChild(document.createTextNode('Move -->'));
btn.onclick = function() { moveSelected('list1', 'list2'); }
parent.appendChild(btn);
parent.appendChild(makeList('list2', 0));
}
</script>
</head>
<body onload="myInit();">
<div id='holder1'></div>
</body>
</html>
适合您的示例..
A working example for you ..
<html>
<body>
<table border="1" cellspacing="2" cellpadding="15">
<tr valign="top">
<td>
Source<br />
<select name="srcList" id="srcList" multiple="true" style="width:150px" size="10">
<option value="1" OriginalIndex="0">Value 1</option>
<option value="2" OriginalIndex="1">Value 2</option>
<option value="3" OriginalIndex="2">Value 3</option>
<option value="4" OriginalIndex="3">Value 4</option>
<option value="5" OriginalIndex="4">Value 5</option>
<option value="6" OriginalIndex="5">Value 6</option>
<option value="7" OriginalIndex="6">Value 7</option>
<option value="8" OriginalIndex="7">Value 8</option>
<option value="9" OriginalIndex="8">Value 9</option>
<option value="10" OriginalIndex="9">Value 10</option>
</select>
</td>
<td>
<input type="button" value=">" onclick="moveList('srcList','destList')" /><br />
<input type="button" value=">>" onclick="moveList('srcList','destList',true)" /><br />
<input type="button" value="<" onclick="moveList('destList','srcList')" /><br />
<input type="button" value="<<" onclick="moveList('destList','srcList',true)" /><br />
</td>
<td>
Target<br />
<select name="destList" id="destList" multiple="true" style="width:150px" size="10">
</select>
</td>
</tr>
</table>
<script>
function moveList(a,b, moveAll) {
var srcObj = document.getElementById(a);
var dstObj = document.getElementById(b);
for(var i = 0; i < srcObj.options.length; i++) {
if(srcObj.options[i].selected || moveAll) {
var opt = new Option(srcObj.options[i].text);
opt.value = srcObj.options[i].value;
opt.OriginalIndex = srcObj.options[i].OriginalIndex;
var flag = false;
if(dstObj.options.length > 0) {
for(var j =0; j < dstObj.options.length; j++) {
if(dstObj.options[j].OriginalIndex > srcObj.options[i].OriginalIndex) {
try {
dstObj.add(opt,j);
}
catch (e) {
dstObj.add(opt);
}
flag = true;
break;
}
}
}
if(!flag) {
try {
dstObj.add(opt,srcObj.options[i].OriginalIndex);
}
catch (e) {
dstObj.add(opt);
}
}
srcObj.remove(i);
i = -1;
}
}
}
</script>
</body>
</html>
希望这可以帮助您..
问候，
尼拉·索尼(Nial Soni)
Hope this may help you out..
Regards,
Niral Soni
这篇关于如何在不使用javascript更改顺序的情况下在select中移动多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
