Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

danimac13

Como adicionar options no javascript

Por , em Javascript

Recommended Posts

danimac13    0

danimac13
Postado

Olá pessoal! Estou querendo fazer combos alinhados. Já consegui fazer todas as requisições. Agora só falta colocar options no combo2. Qual comando javascript adiciona opções em uma combo. Onde encontro api's que possam ajudar-me a resolver esse problema.Agradeço desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Dois exemplos:

 

<html><head><script type="text/javascript">function insertBeforeSelected(){	var x=document.getElementById("mySelect"); //retorna o objeto select	var options = x.getElementsByTagName("option"); //pega a lista de options do select		if (x.selectedIndex>=0)	{		var y=document.createElement('option'); //cria um novo elemento option		y.text='Kiwi'; //seta o texto do elemento option		y.value=options.length; //seta o valor do elemento option		var sel=x.options[x.selectedIndex];  //pega o indice selecionado do objeto select		try		{			x.add(y,sel); // adiciona um novo option antes do indice selecionado para navegadores complacentes		}		catch(ex)		{			x.add(y,x.selectedIndex); // adiciona um novo option antes do indice selecionado para o IE		}	}}function removeOption(){	var x=document.getElementById("mySelect")	x.remove(x.selectedIndex)}</script></head><body><form><select id="mySelect">  <option value="0">Maça</option>  <option value="1">Melão</option>  <option value="2">Banana</option>  <option value="3">Laranja</option></select><input type="button" onclick="insertBeforeSelected()" value="Inserir option antes da seleção" /><input type="button" onclick="removeOption()" value="Remover option selecionado"></form></body></html>

<html><head><script type="text/javascript">function insertSelected(){	var x=document.getElementById("mySelect"); //retorna o objeto select	var options = x.getElementsByTagName("option"); //pega a lista de options do select		if (x.selectedIndex>=0)	{		var y=document.createElement('option'); //cria um novo elemento option		y.text='Kiwi'; //seta o texto do elemento option		y.value=options.length; //seta o valor do elemento option		try		{			x.add(y,null); // adiciona um novo option no fim da lista para navegadores complacentes		}			catch(ex)		{			x.add(y); // adiciona um novo option no fim da lista para o IE		}	}}  function removeLastOption(){	var x=document.getElementById("mySelect")	if (x.length>0)	{		x.remove(x.length-1);	}}</script></head><body><form><select id="mySelect">  <option value="0">Maça</option>  <option value="1">Melão</option>  <option value="2">Banana</option>  <option value="3">Laranja</option></select><input type="button" onclick="insertSelected()" value="Inserir option no fim da lista" /><input type="button" onclick="removeLastOption()" value="Remover ultimo option"></form></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Décio Luiz Rocha    0

Décio Luiz Rocha
Postado

Pessoal, tudo bem???

desculpe reviver um tópico antigo assim, mas, talvez eu consiga a resposta da minha pergunta mais facilmente por aqui.

 

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 Slect 1.

 

Quando clico em um elemento do Select 2, ele não envia o selecionado para o Primeiro. 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 vcs 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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito