select - deixar itens verde com fundo preto ao clicar

[Biel. 9]

boa noite a todos. direto ao ponto.

Pessoal gostaria que quando clicar no dia 1 de março de 2015 ficasse verde os três item com fundo preto

conforme 2º exemplo abaixo .

Nota copie todo o codigo e cole no seu editor de texto para ver na integra o que eu quero fazer. Obrigado amigo!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.tata_01 {width:80px; font-size:17px; font-weight:bold; color:#585858; background-color:#D6D6D6;}
.tata_02 {width:120px; font-size:17px; font-weight:bold; color:#585858; background-color:#D6D6D6; margin-left:10px;}
.tata_03 {width:80px; font-size:17px; font-weight:bold; color:#585858; background-color:#D6D6D6;
 margin-left:10px;}

#aprendiz1{ width:80; height:100px; background:#D6D6D6; float:left; margin-left:0px;}
#aprendiz2{ width:80; height:100px; background:#D6D6D6; float:left; margin-left:10px;}
#aprendiz3{ width:80; height:100px; background:#D6D6D6; float:left; margin-left:10px;}

.a{ color:#090; background:#000; font-size:20px;}
.b{ color:#090; background:#000; font-size:20px;}
.c{ color:#090; background:#000; font-size:20px;}

</style>

.

<form action="aprendiz_99.php" name="form1" id="form1" method="get">
<select name="tata_01" class="tata_01" size="5" >
    <option value="1">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" class="tata_02"  size="5" >
    <option value="janeiro">janeiro</option>
    <option value="fevereiro">fevereiro</option>
    <option value="marco">março</option>
    <option value="abril">abril</option>
    <option value="maio">maio</option>
</select>

<select name="tata_03" class="tata_03"  size="5" >
    <option value="2015">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>

2º ex:

<br><br>
<div id="aprendiz1"><span class="a">dia 1</span></div>
<div id="aprendiz2"><span class="b">março</span></div>
<div id="aprendiz3"><span class="c">2015</span></div>

 

[WictorP 9]

Posso estar à fazer uma gambiarra aqui, mas creio que vai funcionar.

$(".tata_01").change(function() {
 var data = this.value;
 var dia = $("#dia"+data);
 $(dia).css("background","black"); // ai você colocaria as outras formações e faria a mesma coisa com os  mes e anos
});

<div id="dia"><span class="a">dia 1</span></div>

OBS: não sei se vai funcionar fiz tudo aqui sem testar.

[William Bruno 1501]

@Biel, não duplique sua dúvida pelo fórum.

Se vc já postou em CSS, não precisa postar novamente em JavaScript.

 

Apaguei a duplicata.

[Biel. 9]

VictorP. O script está funcionando. Detalhe: Só que fica marcado antes do click. Gostaria que ficasse marcado depois que

item dia

item marco

item 2015 fosse pressionado.

<script type="text/javascript">

$(".tata_01").change(function() {

 var data = this.value;

 var dia = $("#dia"+data);

 $(dia).css("background","black"); 

});


</script>