enviar valor de um listbox para outro de acordo com a ordem de selecao

Marcus Vinícius Nash · Abril 21, 2008

Caro Colegas,

Não tenho o habito de usar fóruns para esclarecer dúvidas, por isso peço desculpas caso esteja perguntando no tópico errado...

Bem, fiz um select com o multiple, quando seleciono N valores, ele pega na ordem da seleção... depois mudei de um select para dois select multiple (listbox), colocando os valores de um lado sendo jogados para o outro, de novo o X da questão, ele não obedece a ordem de seleção e sim a ordem de listagem.

Ex.

Nome1

Nome2

Nome3

Nome4

Mandei para o outro listbox o nome4 e nome2, mas ele auto ordena com a seguinte ordem

Nome2

Nome4

http://forum.imasters.com.br/public/style_emoticons/default/excl.gif Mas eu preciso dos resultados conforme a seleção que enviei.

Nome4 e

Nome2

Imagem Postada

O segundo listbox envia os dados em array para que o php execute um foreach e depois faca a selcao

dos valores, so que ele pega a ordem do list e nao da selecao.

Um pouco complexo de explicar, pois estou a um bom tempo querendo achar algo ligado a isso na internet

e nao consigo, espero que vocês possam me ajudar. Obrigado

berkowitz · Abril 21, 2008

Fala velho... firme?

Qual o script você está utilizando para mover os itens selecionados para a outra lista?

ABRAX!

Marcus Vinícius Nash · Abril 22, 2008

Qual o script você está utilizando para mover os itens selecionados para a outra lista?

Tranquilo!

Bem, eu estava testando agora com um script pronto, mas tambem parou no mesmo problema, este é o source:

http://forum.imasters.com.br/public/style_emoticons/default/excl.gif JavaScript

var fromBoxInternoArray = new Array();
	var toBoxInternoArray = new Array();
	var selectBoxIndex = 0;
	var arrayOfItemsToSelect = new Array();


	function moveSingleElement()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
		var tmpfromBoxInterno;
		var tmptoBoxInterno;
		if(this.tagName.toLowerCase()=='select'){
			tmpfromBoxInterno = this;
			if(tmpfromBoxInterno==fromBoxInternoArray[selectBoxIndex])tmptoBoxInterno = toBoxInternoArray[selectBoxIndex]; else tmptoBoxInterno = fromBoxInternoArray[selectBoxIndex];
		}else{

			if(this.value.indexOf('>')>=0){
				tmpfromBoxInterno = fromBoxInternoArray[selectBoxIndex];
				tmptoBoxInterno = toBoxInternoArray[selectBoxIndex];
			}else{
				tmpfromBoxInterno = toBoxInternoArray[selectBoxIndex];
				tmptoBoxInterno = fromBoxInternoArray[selectBoxIndex];
			}
		}

		for(var no=0;no<tmpfromBoxInterno.options.length;no++){
			if(tmpfromBoxInterno.options[no].selected){
				tmpfromBoxInterno.options[no].selected = false;
				tmptoBoxInterno.options[tmptoBoxInterno.options.length] = new Option(tmpfromBoxInterno.options[no].text,tmpfromBoxInterno.options[no].value);

				for(var no2=no;no2<(tmpfromBoxInterno.options.length-1);no2++){
					tmpfromBoxInterno.options[no2].value = tmpfromBoxInterno.options[no2+1].value;
					tmpfromBoxInterno.options[no2].text = tmpfromBoxInterno.options[no2+1].text;
					tmpfromBoxInterno.options[no2].selected = tmpfromBoxInterno.options[no2+1].selected;
				}
				no = no -1;
				tmpfromBoxInterno.options.length = tmpfromBoxInterno.options.length-1;

			}
		}


		var tmpTextArray = new Array();
		for(var no=0;no<tmpfromBoxInterno.options.length;no++){
			tmpTextArray.push(tmpfromBoxInterno.options[no].text + '___' + tmpfromBoxInterno.options[no].value);
		}
		tmpTextArray.sort();
		var tmpTextArray2 = new Array();
		for(var no=0;no<tmptoBoxInterno.options.length;no++){
			tmpTextArray2.push(tmptoBoxInterno.options[no].text + '___' + tmptoBoxInterno.options[no].value);
		}
		tmpTextArray2.sort();

		for(var no=0;no<tmpTextArray.length;no++){
			var items = tmpTextArray[no].split('___');
			tmpfromBoxInterno.options[no] = new Option(items[0],items[1]);

		}

		for(var no=0;no<tmpTextArray2.length;no++){
			var items = tmpTextArray2[no].split('___');
			tmptoBoxInterno.options[no] = new Option(items[0],items[1]);
		}
	}

	function sortAllElement(boxRef)
	{
		var tmpTextArray2 = new Array();
		for(var no=0;no<boxRef.options.length;no++){
			tmpTextArray2.push(boxRef.options[no].text + '___' + boxRef.options[no].value);
		}
		tmpTextArray2.sort();
		for(var no=0;no<tmpTextArray2.length;no++){
			var items = tmpTextArray2[no].split('___');
			boxRef.options[no] = new Option(items[0],items[1]);
		}

	}
	function moveAllElements()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,'');
		var tmpfromBoxInterno;
		var tmptoBoxInterno;
		if(this.value.indexOf('>')>=0){
			tmpfromBoxInterno = fromBoxInternoArray[selectBoxIndex];
			tmptoBoxInterno = toBoxInternoArray[selectBoxIndex];
		}else{
			tmpfromBoxInterno = toBoxInternoArray[selectBoxIndex];
			tmptoBoxInterno = fromBoxInternoArray[selectBoxIndex];
		}

		for(var no=0;no<tmpfromBoxInterno.options.length;no++){
			tmptoBoxInterno.options[tmptoBoxInterno.options.length] = new Option(tmpfromBoxInterno.options[no].text,tmpfromBoxInterno.options[no].value);
		}

		tmpfromBoxInterno.options.length=0;
		sortAllElement(tmptoBoxInterno);

	}


	/* This function highlights options in the "to-boxes". It is needed if the values should be remembered after submit. Call this function onsubmit for your form */
	function multipleSelectOnSubmit()
	{
		for(var no=0;no<arrayOfItemsToSelect.length;no++){
			var obj = arrayOfItemsToSelect[no];
			for(var no2=0;no2<obj.options.length;no2++){
				obj.options[no2].selected = true;
			}
		}

	}

	function createMovableOptions(fromBoxInterno,toBoxInterno,totalWidth,totalHeight,labelLeft,labelRight)
	{
		fromObj = document.getElementById(fromBoxInterno);
		toObj = document.getElementById(toBoxInterno);

		arrayOfItemsToSelect[arrayOfItemsToSelect.length] = toObj;


		fromObj.ondblclick = moveSingleElement;
		toObj.ondblclick = moveSingleElement;


		fromBoxInternoArray.push(fromObj);
		toBoxInternoArray.push(toObj);

		var parentEl = fromObj.parentNode;

		var parentDiv = document.createElement('DIV');
		parentDiv.className='multipleSelectBoxControl';
		parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
		parentDiv.style.width = totalWidth + 'px';
		parentDiv.style.height = totalHeight + 'px';
		parentEl.insertBefore(parentDiv,fromObj);


		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelLeft;
		subDiv.appendChild(label);

		subDiv.appendChild(fromObj);
		subDiv.className = 'multipleSelectBoxDiv';
		parentDiv.appendChild(subDiv);


		var buttonDiv = document.createElement('DIV');
		buttonDiv.style.verticalAlign = 'middle';
		buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
		buttonDiv.style.width = '30px';
		buttonDiv.style.textAlign = 'center';
		parentDiv.appendChild(buttonDiv);

		var buttonRight = document.createElement('INPUT');
		buttonRight.type='button';
		buttonRight.value = '>';
		buttonDiv.appendChild(buttonRight);
		buttonRight.onclick = moveSingleElement;

		var buttonAllRight = document.createElement('INPUT');
		buttonAllRight.type='button';
		buttonAllRight.value = '>>';
		buttonAllRight.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllRight);

		var buttonLeft = document.createElement('INPUT');
		buttonLeft.style.marginTop='10px';
		buttonLeft.type='button';
		buttonLeft.value = '<';
		buttonLeft.onclick = moveSingleElement;
		buttonDiv.appendChild(buttonLeft);

		var buttonAllLeft = document.createElement('INPUT');
		buttonAllLeft.type='button';
		buttonAllLeft.value = '<<';
		buttonAllLeft.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllLeft);

		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelRight;
		subDiv.appendChild(label);

		subDiv.appendChild(toObj);
		parentDiv.appendChild(subDiv);

		toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
		fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';


		selectBoxIndex++;

	}

http://forum.imasters.com.br/public/style_emoticons/default/excl.gif HTML

<form method="post" onsubmit="multipleSelectOnSubmit()">
<select multiple name="fromBoxInterno[]" id="fromBoxInterno">
	<option value="1">Nome1</option>
	<option value="2">Nome2</option>
	<option value="3">Nome3</option>
	<option value="4">Nome4</option>
	<option value="5">Nome5</option>
	<option value="6">Nome6</option>
</select>
<select multiple name="toBoxInterno[]" id="toBoxInterno">
</select>
<script type="text/javascript">
createMovableOptions("fromBoxInterno","toBoxInterno",500,300,'Lista de uso interno','Selecionados');
</script>

O nome Interno foi para diferencia já que estou trabalhando com dois listbox um para os medicamentos de uso interno e externo

por isso as var estao com esses nomes.

Aguardo, mto obrigado!

andreia_sp · Abril 22, 2008

Pelo que eu vi no teu codigo, ele faz um loop e por isso ele reorganiza. Tente fazer, ao invés de um loop, um createElement para adicionar no list o item selecionado

berkowitz · Abril 22, 2008

Boa! :D

Marcus Vinícius Nash · Abril 22, 2008

Pelo que eu vi no teu codigo, ele faz um loop e por isso ele reorganiza. Tente fazer, ao invés de um loop, um createElement para adicionar no list o item selecionado

Olá Andreia...

Bem procurei sobre CreateElement, nao consegui entender o funcionamento dele no lugar do loop

pelo que entendi ele pode atribuir novos valores sem refresh, mas ai fico uma duvida...

o for no caso serve para verificar multipla selecoes... o q é desnecessário para mim!

devo eu gerar uma var com os valores da segunda listbox para depois adicionar o ultimo valor é isso?

ser for me de mais uma luz, foi mto objetivo nem sou tao experiente assim!

desculpa se expliquei meio baguncado, mas java script é um nó em minha cabeca!

// Movendo 1 iten da fromBoxInterno para toBoxInterno

		for(var no=0;no<tmpfromBoxInterno.options.length;no++){
			if(tmpfromBoxInterno.options[no].selected){
				tmpfromBoxInterno.options[no].selected = false;
				tmptoBoxInterno.options[tmptoBoxInterno.options.length] = new Option(tmpfromBoxInterno.options[no].text,tmpfromBoxInterno.options[no].value);

				for(var no2=no;no2<(tmpfromBoxInterno.options.length-1);no2++){
					tmpfromBoxInterno.options[no2].value = tmpfromBoxInterno.options[no2+1].value;
					tmpfromBoxInterno.options[no2].text = tmpfromBoxInterno.options[no2+1].text;
					tmpfromBoxInterno.options[no2].selected = tmpfromBoxInterno.options[no2+1].selected;
				}
				no = no -1;
				tmpfromBoxInterno.options.length = tmpfromBoxInterno.options.length-1;

			}
		}

Obrigado

Marcus Vinícius Nash · Abril 28, 2008

Solução:

http://gujs.com.br/blog/2007/04/movendo-itens-entre-list-boxs/

berkowitz · Abril 28, 2008

Deu certo?

ABRAX!

Arquivado

enviar valor de um listbox para outro de acordo com a ordem de selecao

Recommended Posts

Marcus Vinícius Nash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcus Vinícius Nash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andreia_sp 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcus Vinícius Nash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcus Vinícius Nash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

berkowitz 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante