Intercambiar Style entre Dois Selects através de Javascript

deciorocha · Julho 12, 2016, 4:41pm

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>

Lucas_Camara · Julho 12, 2016, 5:17pm

<!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 · Julho 12, 2016, 7:32pm

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 · Julho 12, 2016, 8:00pm

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 · Julho 13, 2016, 2:29pm

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

Lucas_Camara · Julho 13, 2016, 3:58pm

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 · Julho 13, 2016, 4:45pm

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 · Julho 14, 2016, 12:21pm

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.

Intercambiar Style entre Dois Selects através de Javascript

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI