Calling javascript function with combo

Asked

Viewed 818 times

1

function SemAcao() { return false; }


function Mostra(nome, modelo, preco) {
var nom = document.getElementById("bolnome");
var foto = document.getElementById("bolimg");
var prec = document.getElementById("bolprc");

nom.innerHTML = "" + nome + "";
foto.src = "imagens/" + modelo + ".jpg";
prec.innerHTML = "R$ " + preco + ",00";
}

function Esconde() {
var nom = document.getElementById("bolnome");
var foto = document.getElementById("bolimg");
var prec = document.getElementById("bolprc");

nom.innerHTML = "";
foto.src = "imagens/Vazio.jpg";
prec.innerHTML = "";
}
body {
    color: #FCD605;
    font-size: 16px;	
    background: #377254;
    Font-family: verdana, liberation;
}

a:link    { color: #FFFF33; }
a:visited {color: #F3EDA3; }

ol, ul {line-height: 200%;    }


header {   display: block; margin-bottom: 1px; }

nav { display: block; width: 20%; float: left; }

section { display: block; width: 77%; float: right; }

.ender { float: right; text-align: right; font-size: 16px; line-height: 100% }

imgLogo {padding-bottom: 15px; border-bottom: 3px solid; margin-bottom: 6px; }

nav ul { color:#F3EDA3; margin-top: 30px; list-style-type: circle }

div.apres { text-align: left; }

div.btn {text-align: center;}
 
 
tabInfo { color:#006600; 
          font-family:"arial,ubuntu"; 
          margin-top: 6px solid black; 
          border-collapse: collapse; 
          background-color:#FFFFBB;
	 

          
}

.tabInfo td, .tabInfo th {
          border: 2px solid #000000; 
          padding: 6px 12px 6px 12px;
          background-color: #FFFFBB;
          color:#006600;
          
}

.tabInfo .linTH {
          color:#FFFFFF;
          text-align: center;
          vertical-align: middle;
          background-color: #0077BB; 
}

.tabInfo .colTH {
          color: #006600; 
          text-align: left; 
          background-color: #AACC55;}

.tabInfo .preco {color: #CC0000; font-weight: bold; vertical-align: middle;}




/*Questão 5*/

fieldset { margin: 20px 10px 0px 10px;
} 

#fsEsq {float:left; display:inline;
}

#fsDir {float:right; display: inline;
}

.valorDir {width: 110px; float:right;
}


botoes { margin: 20px 10px 0px 10px; 
float: right;
}

btn {
text-align:center;
}

formLinha { margin-bottom:6px ; width: 470px;
}

.colPri { float: left; display:block; width: 90px;
}
           
.elemDir { float: right; display: block; 
}

#inpGrande { width:470px; 
}

#impMedio {width: 120px; 
}

#numDD {maxlength:2; width:30px; 
}

#numQD {maxlength:4; width:50px; }

divcenter {position:absolute;
   margin-left:50px;
   margin-right:50px;}

/*Questão 6*/

inpEmail {width: 200px;
}

#fsEsqCompras {float:left; display:inline;
}

#fsDirCompras{float:right; display: inline;
}


.tabInfo a:link { 
	color:#003333; 
	text-decoration:none; 
}

.tabInfo a:hover { 
	color:#003333; 
	text-decoration:none;
	font-weight: bold; 
	color: red 
}

.tabInfo a:visited { color:#005555; 
text-decoration:none; }


#tabela2 {float:left;
display: inline; }
<!DOCTYPE html>
<html><head>
<title>Bola da vez</title> <!-- título na barra da página -->
<base target="_blank" />
<script type="text/javascript" src="Esportes.js"></script>

<link rel="stylesheet" type="text/css" href="BolaDaVez.css"/>
</head>

<body>   


<section>
<h3>Esportes</h3>
<br/>
<table><td>
<table class="tabInfo" >
<tr><th colspan="3" class="linTH">Esportes</th></tr>
<tr><th class="linTH">Modalidade</th>
<th class="linTH">Produto</th>
<th class="linTH">Marca e Modelo</th>
</tr>

<tr><th class="colTH">Basquete</th>
<th> Bola </th>
<td> <a href="javascript:SemAcao();"
onMouseOver="Mostra('Bola de Basquete','Wilson', 70);"
onMouseOut="Esconde();"> Wilson </td>
<tr><th rowspan="2" class="colTH">Volei</th>
<th>Bola</th> 
<td> 
<select onchange="javascript:SemAcao();" onclick="Mostra();"
onMouseOut="Esconde();"> 
<option>---</option>
<optgroup> 
<option>Penalty <option></optgroup></td>
<tr>
<tr><th rowspan="2" class="colTH">Tênis</th>
<th> Bola</th>
<td>Wilson</td></tr>

<tr>
<th>Raquete</th>
<td> Adams </td>
</tr>

<tr><th rowspan="2" class="colTH">Futebol</th>
<th>Bola</th> 
<td> <select> <option>---</option></td>
</tr>
<tr>
<th>Camisa</th>
<td><select id=> <option>---</option>
<option>Adidas Alemanha</option>
<option>Nike Portugal</option>
<option>Nike França</option> </td>
</tr>
</table></td>
<td>

<table class="tabInfo">
<tr rowspan="2">
<td id="bolnome" class="nome"></td></tr>
<td> <img id="bolimg" src="imagens/Vazio.jpg" /></td> </td>
</tr>
<td id="bolprc" class="preco"></td> 

</tr>
</table></td>
</table>
</section>

<br>
</body>
</html>

When selecting an item from one of the Combos, it will be called a javascript function that will show in the second table a product description (product, modality, brand and model), its photo and its price, as can be observed in Figure 6.

inserir a descrição da imagem aqui

javascript function combobox

  • What problem are you facing?

  • To send the data via combo, use: onchange="suaFuncao()".

1 answer

1

I don’t know if that’s what you want, but you can do that with jQuery. By selecting a combo option, you can call another function within this event.

$('.select-combos').change(function(event) {   
    //chama função ex: novaTabela();        
});

Hope I helped, hugs!

Browser other questions tagged javascript function combobox

You are not signed in. Login or sign up in order to post.