how to move multiple value in select without changing the order using javascript

Question

0.00/5 (No votes)

See more:

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

Posted 10-Aug-12 0:27am

Skvignesh

Add a Solution

2 solutions

Solution 1

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.

HTML

<!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>

Posted 10-Aug-12 3:51am

enhzflep

Comments

Volynsky Alex 10-Aug-12 9:57am

Good answer!

enhzflep 10-Aug-12 10:51am

Thanks. :smile:

Volynsky Alex 10-Aug-12 10:59am

You are welcome :)

StianSandberg 10-Aug-12 11:35am

Great answer :) 5'd

enhzflep 10-Aug-12 12:38pm

Thank-you kindly! :grin:

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Niral Soni · Accepted Answer · 2012-08-10T04:46:00

A working example for you ..

HTML

<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>

Hope this may help you out..

Regards,
Niral Soni