Intercambiar Style entre Dois Selects através de Javascript

Décio Luiz Rocha · Julho 12, 2016

Pessoal, tudo bem???

tenho um código Javascript com dois selects.

O Select 1 já está populado e ao selecionar um elemento, todos os outros elementos vão para o Select 2 , menos o selecionado no Select 1.

Quando clico em um elemento do Select 2, ele envia todos menos o selecionado para o Select 1. 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 tmbm.

Segue o código para que vocês entendam:

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

Entrar

Intercambiar Style entre Dois Selects através de Javascript

Pergunta

Décio Luiz Rocha

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades