Ir para conteúdo

Arquivado

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

Davidk

Carregar um option selecionando o valor em outro option

Por , em Javascript

Recommended Posts

Davidk    0

Davidk
Postado

Olá, pessoal. Não estou conseguindo carregar um option selecionando o valor em outro. Neste caso quando selecionar 'Fundamental' quero que ele carregue o option do 6° ao 9° através do listener onchange. segue código...

 

<script >
var optValue ;
var optText ;
optValue = optText = ['Fundamental', 'Médio'];
document.getElementById("grau").addEventListener("change", verificarValorOption(optValue,optText,'grau'));
function verificarValorOption(optValue,optText,id) {
if(optionState(id)){
alert('Mudou');
changeSerie(id,'serie');
}else{
alert('Iniciou');
carregaOptions(optValue,optText,id);
}
};

function optionState(id) {
var x = document.getElementById(id);
alert(x);
var valor = "";
if(x!=null){
valor = x.options[x.selectedIndex].value;
if(valor!=''){
return true;//se não estiver vazio
}else{
return false;// se estiver vazio
}
}else{
return false;
}
};

function optionValue(id) {
var x = document.getElementById(id);
var valor = x.options[x.selectedIndex].value;
return valor;
};

function carregaOptions(optValue,optText,id) {
var verif = optionValue(id);
if(verif==''){
var novoOption = document.getElementById(id);
for(var i = 0; i < optValue.length; i++){
var opt = document.createElement("option");
opt.value = optValue;
opt.text = optText;
novoOption.add(opt, novoOption.options);
}
}else{
var novoOption = document.getElementById(id);
novoOption.remove(0);
for(var i = 0; i < optValue.length; i++){
var opt = document.createElement("option");
opt.value = optValue;
opt.text = optText;
if(verif==optValue){
opt.selected = 'selcted';
}
novoOption.add(opt, novoOption.options);
}
}

}

function changeSerie(id,idplace) {
var verif = verificarValorOption(id);
if('Fundamental' === verif){
optValue = ['6º','7º','8','9º'];
optText = ['6º ano','7º ano','8º ano','9º ano'];
carregaOptions(optValue,optText,idplace);
}else{
if('Médio' === verif){
optValue = ['1º','2º','3º'];
optText = ['1º ano','2º ano','3º ano'];
carregaOptions(optValue,optText,idplace);
}else{
return false;
}
}

}

</script>
<br/>
<form id="formAjax" method="POST" action="javascript:enviaDados('Turma/<?php echo $action ?>/<?php echo $value["id"] ?>')">
<fieldset>
<legend> TURMA</legend>
<label for="grau">Grau  <span class="error"><?php echo $erro['grau']; ?></span> </label>
</br><select name="grau" id="grau" /><option value="<?php echo $value['grau']; ?>" >Selcione Grau</option>
</select><br /><br />

<label for="serie">Serie  <span class="error"><?php echo $erro['serie']; ?></span> </label>
<select name="serie" id="serie" /><option value="<?php echo $value['serie']; ?>" ></option></select><br /><br />

<label for="nome">Nome  <span class="error"><?php echo $erro['nome']; ?></span> </label>
<select name="nome" id="nome" /><option value="<?php echo $value['nome']; ?>" ></option></select><br /><br />

<label for="turno">Turno  <span class="error"><?php echo $erro['turno']; ?></span> </label>
<select name="turno" id="turno" /><option value="<?php echo $value['turno']; ?>" ></option></select><br /><br />

<label for="ano">Ano  <span class="error"><?php echo $erro['ano']; ?></span> </label>
<select name="ano" id="ano" /><option value="<?php echo $value['ano']; ?>" ></option></select><br /><br />

<input type="submit" class="botao" value="Salvar"/>
</fieldset>
</form>
<br/><br/>

Agradeço sugestões.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

_Isis_    202

_Isis_
Postado

Aqui no Chrome dá o seguinte erro:
Uncaught TypeError: Cannot read property 'addEventListener' of null

Resolvido usando o addEventListener DOMContentLoaded no documento.

<html>
<head>
<script>
			maps = new Map();
			maps.set("Fundamental", "1-5");
			maps.set("Medio", "6-9");
			
			function carregarSerie(event) {
				var selecao = this.selectedOptions[0];
				var serie_obj = document.getElementById("serie");
				
				if (Boolean(selecao.value)) {
					serie_obj.querySelector('option [value="'+maps.get(selecao.value)+'"]').selected=true;
				} else {
					serie_obj.querySelector('option [value=""]').selected=true;
				}
			}
			document.addEventListener("DOMContentLoaded", function(event) {
					document.getElementById("grau").addEventListener("change", carregarSerie);
			}); 
			
			
</script>
</head>
<body>
        <br/>
        <form id="formAjax">
            <fieldset>
                <legend> TURMA</legend>
                <label for="grau">Grau </label>
                </br><select name="grau" id="grau">
				<option value="">Selecione</option>
				<option value="Fundamental">Fundamental</option>
				<option value="Medio">Médio</option>
                </select><br /><br />
                
                <label for="serie">Serie </label>
                <select name="serie" id="serie">
				<option value="" >Selecione o grau</option>
				<option value="1-5" >1º a 5º</option>
				<option value="6-9" >6º a 9º</option>
				</select><br /><br />
            </fieldset>
        </form>
        <br/><br/>
</bidy></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Davidk    0

Davidk
Postado

_Isis_, tentei aqui mas não funciona. O html e o script são carregados via ajax, então eles serão preenchidos pelas funcões (os options não existem previamente). Estou tentando desenvolver um aplicativo para realizar empréstimo e devolução de livros didáticos para uma escola, gratuitamente. Neste caso será feito o cadastro das turmas, se escolher ensino fundamental preciso carregar options com 6, 7, 8 e 9 anos, por outro lado se for ensino médio só poderá aparecer options de 1º, 2º e 3º ano, justamente para evitar um filtro posterior. Qualquer dica é só postar.

(me indiquem como colocar o código no frame)

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