Manipular dois selects com Javascript

[gustavocostamelo 0]

Preciso fazer dois formulários de uma lista cidades em HTML. Um para escolher a cidade de origem e outro para escolher a cidade de destino, apartir daí fazer um IF em javascript entre as duas opções para mostrar o preço da passagem. Alguem pode me ajudar ??

[wilnet 92]

Olá gustavo, blza!

 

Veja se te ajuda.

 

jsfiddle.net/wilnet/a2w6sc1a/7/

 

Agora é só você adaptar para suas necessidades.

 

CSS

<style type="text/css">
* {
margin: 0;
padding: 0;
}
			
body {
font-family: sans-serif;
font-size: .9em;
}
			
form {
width: 350px;
margin: 40px auto;
}
			
form fieldset {
border: 1px solid #DDD;
border-radius: 10px;
padding: 10px;
}
			
fieldset legend {
padding: 2px 10px;
margin-left: 10px;
background: #333;
color: #FFF;
border-radius: 4px;
}
			
fieldset label,
fieldset input,
fieldset select {
float: left;
}
			
fieldset label {
line-height: 26px;
clear: left;
width: 120px;
text-align: right;
}
			
fieldset input,
fieldset select {
margin: 0 0 10px 10px;
padding: 3px;
border: 1px solid #DDD;
border-radius: 3px;
}
			
fieldset input {
width: 66px;
}
			
fieldset select {
height: 24px;
width: 150px;
}
			
fieldset button {
float: right;
}
</style>

Script

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
 $(document).ready(function(){
 $('.calc').change(function(){
	var origem = parseFloat($('#origem').val()) || 0.0;
	var destino = parseFloat($('#destino').val()) || 0.0;
	var total = origem + destino;
 $('#total').val(total);
 	});
 });
</script>

HTML

<form id="sum-form" method="post" action="">
<fieldset>
                
 <label for="origem">Cidade Origem</label>
 <select id="origem" name="origem" class="calc">
	<option value="">Escolha</option>
	<option value="25.80">Sao Paulo</option>
	<option value="38.20">Rio de Janeiro</option>
	<option value="45.50">Minas Gerais</option>
 </select>                
                
 <label for="destino">Cidade Destino</label>
 <select id="destino" name="destino" class="calc">
	<option value="">Escolha</option>
	<option value="27.50">Parana</option>
	<option value="32.40">Santa Catarina</option>
	<option value="48.50">Rio Grande do Sul</option>
 </select>
                
 <label for="total_val">Total</label>
	<input type="text" id="total" name="total" class="result" readonly="readonly"/>
 <button type="reset">Limpar</button>
 </fieldset>
</form>

Espero ter ajudado,

 

vlw

[gustavocostamelo 0]

Olá gustavo, blza!

 

Veja se te ajuda.

 

jsfiddle.net/wilnet/a2w6sc1a/7/

 

Agora é só você adaptar para suas necessidades.

 

CSS

<style type="text/css">
* {
margin: 0;
padding: 0;
}
			
body {
font-family: sans-serif;
font-size: .9em;
}
			
form {
width: 350px;
margin: 40px auto;
}
			
form fieldset {
border: 1px solid #DDD;
border-radius: 10px;
padding: 10px;
}
			
fieldset legend {
padding: 2px 10px;
margin-left: 10px;
background: #333;
color: #FFF;
border-radius: 4px;
}
			
fieldset label,
fieldset input,
fieldset select {
float: left;
}
			
fieldset label {
line-height: 26px;
clear: left;
width: 120px;
text-align: right;
}
			
fieldset input,
fieldset select {
margin: 0 0 10px 10px;
padding: 3px;
border: 1px solid #DDD;
border-radius: 3px;
}
			
fieldset input {
width: 66px;
}
			
fieldset select {
height: 24px;
width: 150px;
}
			
fieldset button {
float: right;
}
</style>

Script

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
 $(document).ready(function(){
 $('.calc').change(function(){
	var origem = parseFloat($('#origem').val()) || 0.0;
	var destino = parseFloat($('#destino').val()) || 0.0;
	var total = origem + destino;
 $('#total').val(total);
 	});
 });
</script>

HTML

<form id="sum-form" method="post" action="">
<fieldset>
                
 <label for="origem">Cidade Origem</label>
 <select id="origem" name="origem" class="calc">
	<option value="">Escolha</option>
	<option value="25.80">Sao Paulo</option>
	<option value="38.20">Rio de Janeiro</option>
	<option value="45.50">Minas Gerais</option>
 </select>                
                
 <label for="destino">Cidade Destino</label>
 <select id="destino" name="destino" class="calc">
	<option value="">Escolha</option>
	<option value="27.50">Parana</option>
	<option value="32.40">Santa Catarina</option>
	<option value="48.50">Rio Grande do Sul</option>
 </select>
                
 <label for="total_val">Total</label>
	<input type="text" id="total" name="total" class="result" readonly="readonly"/>
 <button type="reset">Limpar</button>
 </fieldset>
</form>

Espero ter ajudado,

 

vlw

 

Muito obrigado mano, era exatamente isso! Voce é dez :natallaugh:

[wilnet 92]

Que bom que deu certo rsrs

 

vlw

[darley mafra 0]

pessoal eu tentei fazer aki um tbm mas n esta aparecendo o resultado.. olhem ai

<html>
<head>
<title> Bem Vindo ao JavaScript</title>
</head>
<body>
<SCRIPT LANGUAGE ="JAVASCRIPT">
confirm("Você esta pronto para comerçar? Click em ok para continuar");
var userChoice = prompt("Voce escolhe pedra, papel ou tesoura?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "pedra";
} else if(computerChoice <= 0.66) {
computerChoice = "papel";
} else if (computerChoice > 0.67) {
computerChoice = "tesoura";
} 
console.log("Computer: " + computerChoice);


var compare = function (choice1, choice2) {
    if(choice1 === choice2) {
        return "O resultado é um empate!"
    }else if(choice1 === "pedra") {
        if(choice2 === "tesoura") {
            return "pedra vence";
        }else {
            return "papel vence";
        }
    }
    
    if(choice1 === "papel") {
        if(choice2 === "pedra") {
            return "papel vence";
        }else {
            return "tesoura vence";
        }
    }
    if(choice1 === "tesoura") {
        if(choice2 === "pedra") {
           return "pedra vence";
        }else {
            return "tesoura vence";
        }
    }    
};
alert(compare(userChoice, computerChoice))




</script>
<style type="text/css">
*{ font-family: verdana; padding: 10px; text-align: center; background-color: #CFCFCF; }
.negrito { font-weight: bold; font-size: 72px; }
.nome { color: #FF0000; font-weight: bold; }
a { font-weight: bold; color: #000000; text-decoration: none;}
a:visited { color: #000000; }
a:hover { border: 2px solid; }


#rodape { font-size: 10px; }
#rodape a:hover{ text-decoration: underline; border:0; }
</style>
<meta name="author" content="Angelito M. Goulart" />
<meta name="description" content="Jokenpo - Jokenpo em JavaScript" />
<meta name="keywords" content="jokenpo, javascript, jokenpo em javascript, Jokenpo, pedra papel tesoura javascript" />
</head>
<body>
<h1>Jokenpo</h1>
<h4>Bem-vindo ao Jogo</h4>
<div id="resultado">
</div>
<div id="rodape">
Dsenvolvido por Darley Mafra
</div>
</body>
</html>