Oi gente! Estou fazendo um site onde listei no select/option as linhas e ao clicar sobre a linha desejada gostaria que abrisse um PDF com os horários referente aquela linha, é possível fazer isso com Javascript? Sei muito pouco sobre essa linguagem ainda, mas estou estudando… alguém pode me dá uma luz?
Executar função ao clicar em um option do select
M
11 Respostas
R
2 likes
Você tem que usar o listener change do jQuery.
jQuery("#select").change(function(){
// Seu código aqui
});
G
1 like
Você pode usar o jQuery como nosso amigo @Ronyfreitas98 falou, mas é interessante saber antes sobre o evento que será chamado e como ele se comporta… 
M
Entendi +/-… mas como eu chamo o pdf?
M
Posso te mostrar o código? estou perdida…
G
1 like
Toca ficha!
M
<head>
<title>Viação Elite LTDA</title>
<meta charset="utf-8">
<meta name="description" content="Viação Elite trabalhando pra você!">
<link rel="icon" href="img/favicon.png" /> <!--icone do browser-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/linhas.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><!--codigo do google para visualização do IE 6 7 e 8-->
<script type="text/javascript" src="plugins/jquery-1.11.3.min.js"</script><!--chamando jquery-->
<script type="text/javascript" src="linhas.js"></script>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<header id="topo">
<div id="info">
<p>(24) 3348.1818 - Volta Redonda / RJ</p>
</div>
<div id="nav">
<div class="logo">
<a href="index.html"><img src="img/logo_elite.png" alt="logo viação elite"></a>
</div>
<ul>
<li><span class="home"></span><a href="index.html"><span>Home</span></a></li>
<li><span class="empresa"></span><a href="empresa.html"><span>Empresa</span></a></li>
<li><span class="linhas"></span><a href="linhas.html" class="ativo"><span>Linhas</span></a></li>
<li><span class="recursoshumanos"></span><a href="recursoshumanos.html"><span>Recursos Humanos</span></a></li>
<li><span class="contatos"></span><a href="contatos.html"><span>Contato</span></a></li>
</ul>
</div>
</header>
<div id="container">
<div id="informacao_pagina">
</div>
<div id="icon_linhas">
</div>
<!--
<div id="linhas">
<ul id="nav_linhas">
<li><a href="pdf/100.pdf">100 - Cajueiro x Monte Castelo</a></li>
<li><a href="pdf/105.pdf">105 - Jd. Ponte Alta x Jd. Amália II</a></li>
<li><a href="pdf/150.pdf">150 - 208 x Aterrado</a></li>
<li><a href="pdf/155.pdf">155 - Cirucular 15</a></li>
<li><a href="pdf/205.pdf">205 - Água limpa x Conforto</a></li>
<li><a href="pdf/205a.pdf">205A - Morada da Colina x Vila</a></li>
<li><a href="pdf/205b.pdf">205B - Pedreira x Conforto</a></li>
<li><a href="pdf/215.pdf">215 - Nova Primavera x Conforto</a></li>
<li><a href="pdf/215a.pdf">215A - Nova Primavera x Vila</a></li>
<li><a href="pdf/220.pdf">220 - Dom Bosco x Conforto</a></li>
<li><a href="pdf/230.pdf">230 - Santo Agostinho x Conforto</a></li>
<li><a href="pdf/240.pdf">240 - Vila Americana x Conforto</a></li>
<li><a href="pdf/250.pdf">250 - Água Limpa x Padre Josimo</a></li>
<li><a href="pdf/255.pdf">255 - Caviana x Vila</a></li>
<li><a href="pdf/260.pdf">260 - Caieiras x Vila</a></li>
<li><a href="pdf/P.720.pdf">P.720 - Cerâmica x Ponte Alta</a></li>
<li><a href="pdf/P.721.pdf">P.721 - Cerâmica x Vila</a></li>
</ul>
</div>
-->
<div id="filtro-linha-de-onibus">
<br>
<div id="titulo">
<h3>Efetue sua consulta</h3>
<p>"Selecione a linha" e em seguida clique em "OK".</p>
</div>
<form method="get" action="informacoes-operacionais" id="linhas" autocomplete="off">
<br>
<div id="select">
<select id="select-linha-de-onibus" class="form-select" style="width:400px;">
<option value="#">
Selecione uma opção
</option>
<option value="#">
Linha 100 - Cajueiro x Monte Castelo
</option>
<option value="#">
Linha 105 - Jd. Ponte Alta x Jd. Amália II
</option>
<option value="#">
Linha 150 - 208 x Aterrado
</option>
<option value="#">
Linha 155 - Circular 15
</option>
<option value="#">
Linha 205 - Água Limpa x Conforto
</option>
<option value="#">
Linha 205A - Morada da Colina x Vila
</option>
<option value="#">
Linha 205B - Pedreira x Conforto
</option>
<option value="#">
Linha 215 - Nova Primavera x Conforto
</option>
<option value="#">
Linha 215A - Nova Primavera x Vila
</option>
<option value="#">
Linha 220 - Dom Bosco x Conforto
</option>
<option value="#">
Linha 230 - Santo Agostinho x Conforto
</option>
<option value="#">
Linha 240 - Vila Americana x Conforto
</option>
<option value="#">
Linha 250 - Água Limpa x Padre Jósimo
</option>
<option value="#">
Linha 255 - Caviana x Vila
</option>
<option value="#">
Linha 260 - Caieiras x Vila
</option>
</select>
<input type="submit" value="ok" class="input-submit" id="submit-linha-de-onibus" style="width:40px";>
</div>
</form>
</div>
</div>
<!--fim da div container-->
<footer id="rodape">
<div id="direitos">
<p class="copy">© 2015 | Viação Elite LTDA | Todos os Direitos Reservados.</p>
</div>
</footer>
</body>
R
2 likes
@Moniquee, você tem que mudar o value desses option do select pra depois verificar qual foi selecionado. Cada um tem de ter um value diferente.
Exemplo:
<select id="select-linha-de-onibus" class="form-select" style="width:400px;">
<option value="0">
Selecione uma opção
</option>
<option value="1">
Linha 100 - Cajueiro x Monte Castelo
</option>
<option value="2">
Linha 105 - Jd. Ponte Alta x Jd. Amália II
</option>
<option value="3">
Linha 150 - 208 x Aterrado
</option>
<option value="4">
Linha 155 - Circular 15
</option>
<option value="5">
Linha 205 - Água Limpa x Conforto
</option>
<option value="6">
Linha 205A - Morada da Colina x Vila
</option>
<option value="7">
Linha 205B - Pedreira x Conforto
</option>
<option value="8">
Linha 215 - Nova Primavera x Conforto
</option>
<option value="9">
Linha 215A - Nova Primavera x Vila
</option>
<option value="10">
Linha 220 - Dom Bosco x Conforto
</option>
<option value="11">
Linha 230 - Santo Agostinho x Conforto
</option>
<option value="12">
Linha 240 - Vila Americana x Conforto
</option>
<option value="13">
Linha 250 - Água Limpa x Padre Jósimo
</option>
<option value="14">
Linha 255 - Caviana x Vila
</option>
<option value="15">
Linha 260 - Caieiras x Vila
</option>
</select>
Então você cria o evento com o Jquery(não esqueça de inclui-lo), seria assim:
<script type="text/javascript">
jQuery("#select-linha-de-onibus").change(function(){
// Aqui você tem o value selecionado assim que o usuário muda o option
var id = jQuery(this).val();
});
</script>
Dai você cria um if/else para verificar qual está selecionado pelo value do option.
…
No seu caso você tbm poderia colocar o value já como o caminho do pdf, dai seria só manda o usuario para a paginá.
M
Muito obrigada Rony, agora eu estou entendendo… acho melhor eu colocar no value o caminho do pdf, eu acho mais fácil até msm para alterações futuras de horários. Nesse caso como ficaria o código do jQuery?
R
2 likes
Primeiro deve colocar o caminho do pdf no value. Por exemplo:
<select id="select-linha-de-onibus" class="form-select" style="width:400px;">
<option value="docs/pdf1.pdf">
Linha 100 - Cajueiro x Monte Castelo
</option>
<option value="docs/pdf2.pdf">
Linha 105 - Jd. Ponte Alta x Jd. Amália II
</option>
</select>
Depois criar o evento jQuery e redirecionar para o pdf:
<script type="text/javascript">
jQuery("#select-linha-de-onibus").change(function(){
// Aqui você tem o value selecionado assim que o usuário muda o option
var urlPdf = jQuery(this).val();
window.location = urlPdf;
});
</script>
M
1 like
DEU CERTO!!! De coração, muitooooo obrigada!!! (vc me ajudou muito)!!! Valeu!
Criado 12 de janeiro de 2016
Ultima resposta 13 de jan. de 2016
Respostas 11
Participantes 3