Ir para conteúdo

POWERED BY:

Arquivado

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

Biel.

Deixar option do select ativo ao clicar

Recommended Posts

Deixar option do select ativo ao clicar


Direto ao ponto. Pessoal abaixo temos três select option .O

item dia 1

item março

item 2015 estão verde com fundo preto.


Gostaria muito que ficasse verde com fundo preto depois que o item for clicado e não antes.




<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.a{ color:#090; background:#000; }

</style>


....



<form action="aprendiz_99.php" name="form1" id="form1" method="get">

<select name="tata_01" size="5" >
<option value="1" class="a">dia 1</option>
<option value="2">dia 2</option>
<option value="3">dia 3</option>
<option value="4">dia 4</option>
<option value="5">dia 5</option>
</select>

<select name="tata_02" size="5" >
<option value="janeiro">janeiro</option>
<option value="fevereiro">fevereiro</option>
<option value="marco" class="a">março</option>
<option value="abril">abril</option>
<option value="maio">maio</option>
</select>

<select name="tata_03" size="5" >
<option value="2015" class="a">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>

<input type="submit" id="id_botaocss" value="buscar cadastro" />

</form>

Compartilhar este post


Link para o post
Compartilhar em outros sites

No onchange de cada select, coloque a classe com js, e não antes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Só remover os class="a" e colocar o código abaixo no head.

<script>

document.addEventListener("DOMContentLoaded", function(event) {
	var selects = document.getElementsByTagName("select");
	for(var i = 0;i<selects.length;i++)
	{
		selects[i].addEventListener("change", function(e){ for(var j = 0;j<this.options.length;j++){this.options[j].className = '';} this.options[this.selectedIndex].className = 'a'; }, false);
	}
});

</script>

Até mais.

Compartilhar este post


Link para o post
Compartilhar em outros sites

jhrhp, desculpa por não ter o minimo conhecimento em javascript, mas como eu faço a ligação do seu código com o select que postei acima?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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