Jump to content


Photo

[resolvido]como Determinar Os Values


  • Faça o login para participar
10 replies to this topic

#1 Má =)

Má =)

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Feminino

Posted 27/08/2009, 13:43

Olá pessoal

neste código:

<script>	
var combinacao1 = new Array('A','B','C');	
var combinacao2 = new Array('B','C');	
  
function teste(sl1_valor){	
  
switch(sl1_valor){	
case "X":	
add_option('sl2',combinacao1);	
break;	
case "Y":	
add_option('sl2',combinacao2);	
break;	
default:	
alert('escolha');	
break;	
  
}	
  
}	
  
function add_option( combo_name, arr_valores ){	
  
var combo = document.getElementById(combo_name);	
combo.innerHTML = "";	
for(var i=0; i< arr_valores.length;i++){	
var opt = document.createElement('option');	
opt.value = arr_valores[i];	
opt.innerHTML = arr_valores[i];	
combo.appendChild(opt);	
  
}	
  
}	
</script>	
  
  
<select id="sl1" onchange="teste(this.value);">	
<option value="">escolha</option>	
<option value="X">X</option>	
<option value="Y">Y</option>	
</select>	
  
<br>	
  
<select id="sl2"></select>


Como eu poderia determinar os values para os itens que serão formados pelo array ?

Explicando, vou escolher X ou Y no primeiro combo, que carregará o segundo, quero saber como determinar os values para as opções deste segundo combo, porque vou precisar submetê-los a outro formulário.

Grata.
"E não há porque morrer um pouco por dia, deixar perder o sorriso em meio a tanta agonia..."

#2 nvivo

nvivo
  • Visitantes

Posted 27/08/2009, 14:19

Como eu poderia determinar os values para os itens que serão formados pelo array ?


Ma,

A lógica é a mesma, você só precisa alterar um pouco a sua estrutura. Em Javascript, você pode facilmente criar um array dentro de um array, ou objeto dentro de um objeto...

Por exemplo,

var combinacao1 = new Array(new Array('valorA', 'A'), new Array('valorB', 'B'), new Array('valorC', 'C'));

Mas pra ficar mais fácil, é bom lembrar que "new Array('A', 'B', 'C')" pode ser escrito como "['A', 'B', 'C']", e é até recomendado.

Ou seja, você pode simplificar a declaração disso como:
var combinacao1 = [
			 ['textoA', 'valorA'],
			   ['textoB', 'valorB'],
			   ['textoC', 'valorC'],
		 ];

e acessá-los dessa forma:

for (var i = 0; i < combinacao1.length; i++)
		 {
			 // combinacao1[i][0] = texto
			 // combinacao1[i][1] = valor
		 }

[]'s

#3 Má =)

Má =)

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Feminino

Posted 27/08/2009, 15:15

ok, vou tentar aplicar isto aqui.

estou tentando mudar a estratégia para fazer o que preciso.

for (var i = 0; i < combinacao1.length; i++)
		 {
			 // combinacao1[i][0] = texto
			 // combinacao1[i][1] = valor
		 }

[]'s




Não entendi bem isso,
esse acesso seria feito na add_option ?

Atualmente, meu código está assim:

<!-- Começando do zero, AGAIN! -->

<html>
<head>
<title>Comparação de bancos</title>
<script>

var bds_inst1 = [['<option>[Escolha uma opção]</option>'],['<option value="1a">1a</option>'],['<option value="1b">1b</option>'],['<option value="1c">1c</option>']];
var bds_inst2 = [['<option>[Escolha uma opção]</option>'],['<option value="2a">2a</option>'],['<option value="2b">2b</option>'],['<option value="2c">2c</option>']];
var bds_inst3 = [['<option>[Escolha uma opção]</option>'],['<option value="3a">3a</option>'],['<option value="3b">3b</option>'],['<option value="3c">3c</option>']];
var bds_inst4 = [['<option>[Escolha uma opção]</option>'],['<option value="4a">4a</option>'],['<option value="4b">4b</option>'],['<option value="4c">4c</option>']];
	
function validaCombo(){

				 if ((document.getElementById('list_instance_1').value == '') || 
					 (document.getElementById('list_instance_2').value == '') ||
						 (document.getElementById('bd_inst1').value == '') ||
						 (document.getElementById('bd_inst2').value == '')){
						 alert("Selecione duas intâncias e dois bancos.");
						 return false;
				 } 
}

function bd_inst(opcao){
				 switch(opcao){
				 			  case "instance1":
										 //document.getElementById('bds_inst1').innerHtml = opcoes["valor1"];
										 add_option('bd_inst1',bds_inst1);
										 break;
							  case "instance2":
										 //document.getElementById('bds_inst1').innerHtml = opcoes["valor2"];
										 add_option('bd_inst1',bds_inst2);
										 break;
								case "instance3":
										 //document.getElementById('bds_inst2').innerHtml = opcoes["valor3"];
										 add_option('bd_inst2',bds_inst3);
										 break;
								case "instance4":
										 //document.getElementById('bds_inst2').innerHtml = opcoes["valor4"];
										 add_option('bd_inst2',bds_inst4);
										 break;		 		 
				 } 
				 
}

function add_option(combo_name, bds){

var combo = document.getElementById(combo_name);
combo.innerHTML = "";
								
								for(var i=0; i< bds.length;i++){	
											var opt = document.createElement('option');
												opt.value = bds[i];
												opt.innerHTML = bds[i];	
												combo.appendChild(opt);	
							  }
								
}								


</script>
</head>
<body>

<form name="frm_comp" action="ok.htm" method="post" onSubmit="return validaCombo();">
<table border="0" align="center">
<tr>
<td width="200px" align="center">
<h4>INSTÂNCIA</h4>
<select id="list_instance_1" name="" size=1 onChange="bd_inst(this.value);" >
<option>[Selecione uma instância]</option>
<option value="instance1">Instância 1</option>
<option value="instance2">Instância 2</option>
</select>
</td>
<td width="200px" align="center">
<h4>INSTÂNCIA</h4>
<select id="list_instance_2" name="" size=1 onChange="bd_inst(this.value);">
<option>[Selecione uma instância]</option>
<option value="instance3">Instância 3</option>
<option value="instance4">Instância 4</option>
</select>
</td>
</tr>
<tr>
<td width="200px" align="center">
<h4>BANCO</h4>
<select id="bd_inst1" name="" size=1>
</select>
</td>
<td width="200px" align="center">
<h4>BANCO</h4>
<select id="bd_inst2" name="" size=1>
</select>
</td>
</tr>
</table>
<p>
<table align="center">
<tr>
<td>
<input type="submit" value="Enviar">
</td>
</tr>
</table>
</form>
</body>
</html>

Porém, a função validaCombo não exibe a msg se os dois combos de BANCO estiverem em branco. :/

O que pode estar acontecendo?
"E não há porque morrer um pouco por dia, deixar perder o sorriso em meio a tanta agonia..."

#4 nvivo

nvivo
  • Visitantes

Posted 27/08/2009, 16:02

Não entendi bem isso,
esse acesso seria feito na add_option ?


Isso. Aonde você tem:
opt.value = arr_valores[i];
 opt.innerHTML = arr_valores[i];
você vai ter algo como:
opt.value = arr_valores[i][0];
 opt.innerHTML = arr_valores[i][1];

arr_valores[i] agora não é mais um valor único, e sim um array. É só lembrar da matemática... pra resolver x + 1, voce precisa primeiro achar x. É a mesma coisa. Pra "resolver" arr_valores[i][0], você primeiro acha arr_valores, descobre isso é um array e pode resolver arr_valores[i], descobre que isso retorna outro array, e então vai pra arr_valores[i][0].

function validaCombo(){

if ((document.getElementById('list_instance_1').value == '') ||
(document.getElementById('list_instance_2').value == '') ||
(document.getElementById('bd_inst1').value == '') ||
(document.getElementById('bd_inst2').value == '')){
alert("Selecione duas intâncias e dois bancos.");
return false;
}
}

Porém, a função validaCombo não exibe a msg se os dois combos de BANCO estiverem em branco. :/ O que pode estar acontecendo?


Verifique o que está vindo no .value com um alert().
Se voce tem um <option>Selecione um Valor</option>, como não há "value='xxx'", o texto se torna o valor no submit.

Pra testar isso, utilize: elemento.selectedIndex == 0.

[]'s

#5 Má =)

Má =)

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Feminino

Posted 27/08/2009, 16:22

Verifique o que está vindo no .value com um alert().


Fiz o seguinte:

<select id="bd_inst1" name="" size=1 onChange="teste(this.value);">
</select>

function teste(exibe){
				 alert(exibe);
}

Como resultado, está vindo <option value="X">X</option>

Mas eu queria que viesse apenas X.

Isso. Aonde você tem:

opt.value = arr_valores[i];
 opt.innerHTML = arr_valores[i];
você vai ter algo como:
opt.value = arr_valores[i][0];
 opt.innerHTML = arr_valores[i][1];



Tá faltando algo aqui né?

function add_option(combo_name, bds){

				 				var combo = document.getElementById(combo_name);
								combo.innerHTML = "";
								
								for(var i=0; i < bds.length; i++){	
											var opt = document.createElement('option');
												opt.value = bds[i][0];
												opt.innerHTML = bds[i][1];	
												combo.appendChild(opt);	
							  }
								
}




Porque todas as opções do combo aparecem como "undefined", mas pelo menos, se eu num seleciono nada, ele não dá o submit, e fala que falta algo!

Acho que estamos quase lá...

As opções que aparecem são todos "undefined"

Ele não pega o nome que tem que exibir...
Como o primeiro seria nulo --> [Selecione um valor]

Se eu pego algum "undefined" que não o primeiro, ele encara como tenho dados (que realmente há) e a validação funciona como deveria, só falta subir com esse undefined e fazer voltar os dados.
"E não há porque morrer um pouco por dia, deixar perder o sorriso em meio a tanta agonia..."

#6 nvivo

nvivo
  • Visitantes

Posted 27/08/2009, 16:45

Eu não sei como está o seu código agora, mas pelo que você escreveu antes, me parece que você misturou 2 modos de fazer as coisas:

var bds_inst1 = [['<option>[Escolha uma opção]</option>'],['<option value="1a">1a</option>'],['<option value="1b">1b</option>'],['<option value="1c">1c</option>']];

Aí você tem um array de arrays com texto. Não te adianta muito.

Ou você tem algo como:

var opcoes1 = '<option>[Escolha uma opção]</option><option value="1a">1a</option><option value="1b">1b</option>';
// perceba que isso é 1 string com o conteúdo HTML do select
 ...
elementoSelect.innerHtml = opcoes1;

ou você faz:
var opcoes = [ ['[Escolha uma opção]', ''], ['1a', '1a'], ['1b', '1b'] ];
// aqui sim você tem um array com arrays dentro, ou seja uma lista de opcoes, cada uma dividida entre "texto" e "valor"
...
for (var i = 0; i < opcoes.length; i++)
{
	// preenche usando opcoes[i][0] e opcoes[i][1]
}

Percebe?

Vai uma coisa por vez. Primeiro vê se tudo está sendo preenchido direito, se não tiver, não adianta testar a validação.

[]'s

#7 Má =)

Má =)

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Feminino

Posted 27/08/2009, 16:49

Eu não sei como está o seu código agora, mas pelo que você escreveu antes, me parece que você misturou


Atualmente, está assim:

<!-- Começando do zero, AGAIN! -->

<html>
<head>
<title>Comparação de bancos</title>
<script>

//var bds_inst1 = [['texto1A', 'valor1A'],['texto1B', 'valor1B'],['texto1C', 'valor1C']];
//var bds_inst2 = [['texto2A', 'valor2A'],['texto2B', 'valor2B'],['texto2C', 'valor2C']];
//var bds_inst3 = [['texto3A', 'valor3A'],['texto3B', 'valor3B'],['texto3C', 'valor3C']];
//var bds_inst4 = [['texto4A', 'valor4A'],['texto4B', 'valor4B'],['texto4C', 'valor4C']];

//var opcoes = {
//		"valor1" : '<option>1a</option><option>1b</option><option>1c</option>',
//		"valor2" : '<option>2a</option><option>2b</option><option>2c</option>',
//		"valor3" : '<option>3a</option><option>3b</option><option>3c</option>',
//		"valor4" : '<option>4a</option><option>4b</option><option>4c</option>'
//}

var bds_inst1 = [[''],['<option value="1a">1a</option>'],['<option value="1b">1b</option>'],['<option value="1c">1c</option>']];
var bds_inst2 = [[''],['<option value="2a">2a</option>'],['<option value="2b">2b</option>'],['<option value="2c">2c</option>']];
var bds_inst3 = [[''],['<option value="3a">3a</option>'],['<option value="3b">3b</option>'],['<option value="3c">3c</option>']];
var bds_inst4 = [[''],['<option value="4a">4a</option>'],['<option value="4b">4b</option>'],['<option value="4c">4c</option>']];
	

function teste(exibe){
				 alert(exibe);
}

function validaCombo(){


				 if ((document.getElementById('list_instance_1').value == '') || 
					 (document.getElementById('list_instance_2').value == '') ||
						 (document.getElementById('bd_inst1').value == '') ||
						 (document.getElementById('bd_inst2').value == '')){
						 alert("Selecione duas intâncias e dois bancos.");
						 return false;
				 } 
				 
				 else
					  frm_comp.submit();
}

function bd_inst(opcao){
				 switch(opcao){
				 			  case "instance1":
										 //document.getElementById('bds_inst1').innerHtml = opcoes["valor1"];
										 add_option('bd_inst1',bds_inst1);
										 break;
							  case "instance2":
										 //document.getElementById('bds_inst1').innerHtml = opcoes["valor2"];
										 add_option('bd_inst1',bds_inst2);
										 break;
								case "instance3":
										 //document.getElementById('bds_inst2').innerHtml = opcoes["valor3"];
										 add_option('bd_inst2',bds_inst3);
										 break;
								case "instance4":
										 //document.getElementById('bds_inst2').innerHtml = opcoes["valor4"];
										 add_option('bd_inst2',bds_inst4);
										 break;		 		 
				 } 
				 
}

function add_option(combo_name, bds){

				 				var combo = document.getElementById(combo_name);
								combo.innerHTML = "";
								
								for(var i=0; i < bds.length; i++){	
											var opt = document.createElement('option');
												opt.value = bds[i][0];
												opt.innerHTML = bds[i][1];	
												combo.appendChild(opt);	
							  }
								
}								


</script>
</head>
<body>

<form name="frm_comp" action="ok.htm" method="post">
<table border="0" align="center">
<tr>
<td width="200px" align="center">
<h4>INSTÂNCIA</h4>
<select id="list_instance_1" name="" size=1 onChange="bd_inst(this.value);" >
<option>[Selecione uma instância]</option>
<option value="instance1">Instância 1</option>
<option value="instance2">Instância 2</option>
</select>
</td>
<td width="200px" align="center">
<h4>INSTÂNCIA</h4>
<select id="list_instance_2" name="" size=1 onChange="bd_inst(this.value);">
<option>[Selecione uma instância]</option>
<option value="instance3">Instância 3</option>
<option value="instance4">Instância 4</option>
</select>
</td>
</tr>
<tr>
<td width="200px" align="center">
<h4>BANCO</h4>
<select id="bd_inst1" name="" size=1 onChange="teste(this.value);">
</select>
</td>
<td width="200px" align="center">
<h4>BANCO</h4>
<select id="bd_inst2" name="" size=1 onChange="teste(this.value);">
</select>
</td>
</tr>
</table>
<p>
<table align="center">
<tr>
<td>
<input type="button" value="Enviar" onclick="return validaCombo();">
</td>
</tr>
</table>
</form>
</body>
</html>

"E não há porque morrer um pouco por dia, deixar perder o sorriso em meio a tanta agonia..."

#8 nvivo

nvivo
  • Visitantes

Posted 27/08/2009, 17:02

var bds_inst1 = [[''],['<option value="1a">1a</option>'],['<option value="1b">1b</option>'],['<option value="1c">1c</option>']];


Mas aí que tá.. ou você armazena o option completo, ou armazena o texto e valor.

Pense no que você precisa fazer. se você já tem o <option value='xxx'>texto</option>, você não precisa de 2 elementos no array.

Toma um café, relaxa, no começo é assim mesmo.

[]'s

#9 Má =)

Má =)

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Feminino

Posted 28/08/2009, 09:18

FUNCIONOU!!! :D
MUITO OBRIGADA! =)

Só uma coisa, eu tentei usar o isso aqui, que você havia dito:

var opcoes1 = '<option>[Escolha uma opção]</option><option value="1a">1a</option><option value="1b">1b</option>';// perceba que isso é 1 string com o conteúdo HTML do select ...elementoSelect.innerHtml = opcoes1;


Estava colocando desta maneira:

var opcoes = {
		"valor1" : '<option>1a</option><option>1b</option><option>1c</option>',
		"valor2" : '<option>2a</option><option>2b</option><option>2c</option>',
		"valor3" : '<option>3a</option><option>3b</option><option>3c</option>',
		"valor4" : '<option>4a</option><option>4b</option><option>4c</option>'
}



function bd_inst(opcao){
				 switch(opcao){
				 			  case "instance1":
										 document.getElementById('bds_inst1').innerHtml = opcoes["valor1"];
										 										 break;
							  case "instance2":
										 document.getElementById('bds_inst1').innerHtml = opcoes["valor2"];
										 										 break;
								case "instance3":
										 document.getElementById('bds_inst2').innerHtml = opcoes["valor3"];
										 										 break;
								case "instance4":
										 document.getElementById('bds_inst2').innerHtml = opcoes["valor4"];
																			 break;		 		 
				 } 
				 
}

O que haveria de errado aí?


Sou muito noob em JScript, a única coisa que a minha professora do técnico ensinou foi dar alert. ¬¬'
"E não há porque morrer um pouco por dia, deixar perder o sorriso em meio a tanta agonia..."

#10 nvivo

nvivo
  • Visitantes

Posted 28/08/2009, 11:08

O que haveria de errado aí?


Ok, falha nossa.

1. A propriedade é .innerHTML e não .innerHtml. Javascript é case-sensitive, então dá diferenca.
2. Aparentemente há um bug em algumas versões IE que não permite fazer isso só no select!

Como uso Linux, não testei no IE antes.. =)

Nessa página da microsoft há um workaround bem similar, que também bem rápida em termos de processamento.
Em vez de ter o HTML somente do "<option></option>", você tem o html com o select junto, como:

var selects = {
	"select1" : '<select  id='select1'><option>1a</option><option>1b</option><option>1c</option></select>',
	"select2" : '<select  id='select2'><option>2a</option><option>2b</option><option>2c</option></select>',
	 ...
}

E aí, em vez de você definir o innerHTML do select, você define o .outerHTML ou então cria um <div> e define o .innerHTML do div.

Obs: .innerHTML é o HTML de dentro do elemento, o .outerHTML inclui o HTML do elemento em si.

Ex:
tag: <select><option>x</option></select>
select.innerHTML = <option>x</option>
select.outerHTML = <select><option>x</option></select>

Outra coisa que você pode fazer é usar o jQuery que abstrai essas coisas, ficaria como:

$("#select").html(opcoes1);

[]'s

#11 Má =)

Má =)

    Novato no fórum

  • Usuários
  • 10 posts
  • Sexo:Feminino

Posted 28/08/2009, 13:55

Hmm, entendi...
Agora eu estou fazendo umas validações legais, tipo, se não escolheu a instância, não pode escolher o banco, e pretendo exibir uma msg de qual dado está faltando (caso não se preencha todos).

Após isso, vou ter que passar tudo isso para um script CGI, aí que quero ver.
"E não há porque morrer um pouco por dia, deixar perder o sorriso em meio a tanta agonia..."




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq