Intercambiar Style entre Dois Selects através de Javascript

12 de julho de 2016 7 respostas Resolvido

deciorocha 12 de julho de 2016

Tenho um código Javascript com dois select(s).

O Select1 já está populado e ao selecionar um elemento, todos os outros elementos vão para o Select2 , menos o selecionado no Select1. Quando clico em um elemento do Select2, ele envia todos menos o selecionado para o Select1. Eles funciona perfeitamente.

O que não estou conseguindo é passar o conteúdo do Style para o Select oposto, para que seu fundo fique colorido também. Segue o código para que vocês entendam:

selects no js.html (2.3 KB)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript">
			function insertSelected(campoOrig, campoDest){
				Alerta_Valor = campoOrig.value;
				if (Alerta_Valor == "") { alert("Selecione um Item"); return; }
				Origem = campoOrig;
				Destino = campoDest;
				Destino.options.length = 1;
				var Contador = 0; //Destino.length;
				for (var Conta_Laco = 0; Conta_Laco < Origem.length; Conta_Laco++) {
					if (Origem.options[Conta_Laco].selected) {
					} else {
						if ( Origem.options[Conta_Laco].value =="" ) { 
						} else {
							Destino.options[Contador] = new Option(
								Origem.options[Conta_Laco].text, 
								Origem.options[Conta_Laco].value);
						}
						Contador++;
					}
				}
			}
		</script>
	</head>
	<body>
		<form id="form1" name="form1" method="post" action="">
			<table border="0">
				<tr>
					<td> 
						<select style="width: 300px;" name="sel1" id="sel1" size="10" onchange="insertSelected(getElementById('sel1'), getElementById('sel2'));">
							<option style="color:#FFFFFF; background-color:#C02828;" value="">Competidor Um...</option>
							<option value="01" >Alex</option>
							<option value="02" >Beto</option>
							<option value="03" >Cristiano</option>
							<option style="color:#FFFFFF; background-color:#088F08;" value="04" >Décio Rocha</option>
							<option value="05" >Eder</option>
							<option value="06" >Fábio</option>
							<option value="07" >Geovani</option>
							<option value="08" >Helton</option>
							<option style="color:#FFFFFF; background-color:#088F08;" value="09" >Italo</option>
							<option value="10" >Jaime</option>
							<option style="color:#FFFFFF; background-color:#146295;" value="11" >Kaio</option>
							<option value="12" >Lauri</option>
						</select>
					</td>
					<td>--- Vs. ---</td>
					<td>
						<select style="width: 300px;" name="sel2" id="sel2" size="10" onchange="insertSelected(getElementById('sel2'), getElementById('sel1'));">
							<option value="">Competidor Dois...</option>
						</select>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

7 Respostas

Lucas_Camara 12 de jul. de 2016 1 like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		function insertSelected(campoOrig, campoDest) {
			Alerta_Valor = campoOrig.value;
			
			if (Alerta_Valor == "") {
				alert("Selecione um Item"); return;
			}
			
			Origem = campoOrig;
			Destino = campoDest;
			Destino.options.length = 1;
			
			var Contador = 0; //Destino.length;
			
			for (var Conta_Laco = 0; Conta_Laco < Origem.length; Conta_Laco++) {
				if (Origem.options[Conta_Laco].selected) {
					// faz nada
				} else {
					if ( Origem.options[Conta_Laco].value =="" ) { 
						// faz nada
					} else {
						Destino.options[Contador] = new Option(
						Origem.options[Conta_Laco].text, 
						Origem.options[Conta_Laco].value);
						
						if(Origem.options[Conta_Laco].style.backgroundColor) {
							Destino.options[Contador].style.backgroundColor = Origem.options[Conta_Laco].style.backgroundColor;
							Destino.options[Contador].style.color = Origem.options[Conta_Laco].style.color;
						}
					}
					
					Contador++;
				}
			}
		}
	</script>
</head>

<body>
	<form id="form1" name="form1" method="post" action="">
		<table border="0">
			<tr>
				<td> 
					<select style="width: 300px;" name="sel1" id="sel1" size="10" 
							onchange="insertSelected(getElementById('sel1'), getElementById('sel2'));">
						
						<option style="color:#FFFFFF; background-color:#C02828;" value="">Competidor Um...</option>
						<option value="01" >Alex</option>
						<option value="02" >Beto</option>
						<option value="03" >Cristiano</option>
						<option style="color:#FFFFFF; background-color:#088F08;" value="04" >Décio Rocha</option>
						<option value="05" >Eder</option>
						<option value="06" >Fábio</option>
						<option value="07" >Geovani</option>
						<option value="08" >Helton</option>
						<option style="color:#FFFFFF; background-color:#088F08;" value="09" >Italo</option>
						<option value="10" >Jaime</option>
						<option style="color:#FFFFFF; background-color:#146295;" value="11" >Kaio</option>
						<option value="12" >Lauri</option>
					</select>
				</td>
				
				<td>--- Vs. ---</td>
				
				<td>
					<select style="width: 300px;" name="sel2" id="sel2" size="10" 
							onchange="insertSelected(getElementById('sel2'), getElementById('sel1'));">
							
						<option value="">Competidor Dois...</option>
					</select>
				</td>
			</tr>
		</table>
	</form>
</body>

</html>

deciorocha 12 de jul. de 2016

Lucas, obrigado por responder!!!
Realmente funcionou como eu esperava.

Fica a pergunta, para cada evento CSS é preciso uma nova linha. Não há um jeito de capturar todo CSS em uma única linha de Javascript???
Penso no fato de ter um css meio extenso, com muitas opções.

Lucas_Camara 12 de jul. de 2016 2 likes

Tem sim.

Troque o trecho de código:

if(Origem.options[Conta_Laco].style.backgroundColor) {
	Destino.options[Contador].style.backgroundColor = Origem.options[Conta_Laco].style.backgroundColor;
	Destino.options[Contador].style.color = Origem.options[Conta_Laco].style.color;
}

Por:

if(Origem.options[Conta_Laco].style) {
	for(var attr in Origem.options[Conta_Laco].style) {
		Destino.options[Contador].style[attr] = Origem.options[Conta_Laco].style[attr];
	}
}

deciorocha 13 de jul. de 2016

Me deparei com um “pequeno” problema… kkk

Clique no Select 1 e no Select 2 alternadamente para ver o que acontece… somem os elementos.

E agora, José??? kkkkkkkkkkkkkkkkkkkkk

Solucao aceita

Lucas_Camara 13 de jul. de 2016 1 like

Veja a adaptação do código que fiz. Talvez te dê uma luz para resolver essa lógica.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<script type="text/javascript">
		function insertSelected(elOrigem, idDestino) {
			var origem = elOrigem;
			var destino = document.getElementById(idDestino);
			
			if (origem.value == '') {
				console.log('nenhum valor selecionado');
				return;
			}
			
			var elementosOrigem = getElementsFromSelect(origem);
			var elementosDestino = [];
			
			for (var i = 0; i < elementosOrigem.length; i++) {
				var origemOption = elementosOrigem[i];
				
				if(origemOption.selected) {
					origemOption.disabled = true;
				}
				
				elementosDestino.push(origemOption);
			}
			
			setElementInSelect(destino, elementosDestino);
		}
		
		function getElementsFromSelect(el) {
			var elements = [];
			
			elements.push({
				text: 'Selecione',
				value: '',
				style: ''
			});
			
			for(var index in el.options) {
				if(el.options[index].value) {
					var option = {
						text: el.options[index].text,
						value: el.options[index].value,
						style: el.options[index].style,
						selected: el.options[index].selected
					};
					
					elements.push(option);
				}
			}
			
			return elements;
		}
		
		function setElementInSelect(el, elements) {
			for(var index in elements) {
				el.options[index] = new Option(elements[index].text, elements[index].value);
				
				if(elements[index].disabled) {
					el.options[index].disabled = elements[index].disabled;
				}
				
				if(elements[index].style) {
					for(var attr in elements[index].style) {
						el.options[index].style[attr] = elements[index].style[attr];
					}
				}
			}
		}
	</script>
</head>

<body>
	<form id="form1" name="form1" method="post" action="">
		<table border="0">
			<tr>
				<td> 
					<select style="width: 300px;" name="sel1" id="sel1" size="10" onchange="insertSelected(this, 'sel2');">
						<option value="">Competidor Um...</option>
						<option value="01">Alex</option>
						<option value="02">Beto</option>
						<option value="03">Cristiano</option>
						<option value="04">Décio Rocha</option>
						<option value="05">Eder</option>
						<option value="06">Fábio</option>
						<option value="07">Geovani</option>
						<option value="08">Helton</option>
						<option value="09">Italo</option>
						<option value="10">Jaime</option>
						<option value="11">Kaio</option>
						<option value="12">Lauri</option>
					</select>
				</td>
				
				<td>--- Vs. ---</td>
				
				<td>
					<select style="width: 300px;" name="sel2" id="sel2" size="10" onchange="insertSelected(this, 'sel1');">
						
					</select>
				</td>
			</tr>
		</table>
	</form>
</body>

</html>

deciorocha 13 de jul. de 2016

Ficou show!!!
Fiquei pensando, ao ver o elemento sem possibilidade de marcar se não conseguiria dar um hidden nele

To perguntando só para tirar a dúvida, mas, como está já é suficiente.

deciorocha 14 de jul. de 2016

Olá lucastody!!!

Serviu como uma luva as alterações que vc fez.
Te agradeço pelo seu empenho em solucionar meu problema.
DEUS te abençoe!!!
Muito Obrigado.

Criado 12 de julho de 2016

Ultima resposta 14 de jul. de 2016

Respostas 7

Participantes 2

7 Respostas

Topicos relacionados