Jump to content
Sign in to follow this  
danimac13

Como adicionar options no javascript

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.