Sistema de 4 dropdowns interligadas e com mysql

Andrer757 · October 18, 2007 at 07:17 PM

Ola pessoal,

eu precisava de fazer 4 dropdowns que estivessem ligadas ao mysql mas isso até ai é fácil, agora o meu problema é fazer com que dependam umas das outras, ou seja, no caso concreto a 1ª dropdown terá as regiões do país (grande lisboa, grande porto, norte, centro, sul), a 2ª, dependendo do que foi seleccionado na 1ª, apareceram as localidades dessa região, na 3ª as ruas da localidade seleccionada na dropdown anterior e por fim a 4ª o sentido. por exemplo na 1º grande lisboa, na 2ª lisboa, na 3ª 2ª circular e na 4ª aeroporto-benfica.

tenho dois dias para por isto a funcionar por isso precisava mesmo da vossa ajuda.

Obrigado.

djthyrax · October 18, 2007 at 07:20 PM

A tua dúvida não é de PHP mas JavaScript. Basta gerares dinâmicamente um objecto de JavaScript com os dois dropdowns, e com uma função tua, ias alterando os dropdown.

Andrer757 · October 18, 2007 at 07:42 PM

sim mas eu coloquei em php porque isto é para ser através de mysql ou seja as dropdowns terão os valores das respectivas tabelas. Quanto a tua solução eu não sei trabalhar em javascript por isso como é que farias? poderias enviar um exemplo?

Obrigado

djthyrax · October 18, 2007 at 08:36 PM

Isto não tem nada a ver com PHP mas pronto. 😛

primeiroDrop = ["Primeira Opção", "Segunda opção"];
segundoDrop = {"Primeira Opção": ["lulz", "lolada"], "Segunda opção": ["lawl", "lulita"] };
terceiroDrop = {"lulz" : ["Blog 1", "Blog 2"], "lolada": ["wiki 1", "wiki2"], "lawl": ["OLA", "Adeus"], "lulita": ["omg", "lol"]};

Depois, pegavas na var primeiroDrop e geravas o primeiro dropdown. Ao clicar num dos items do 1o dropdown, passavas o valor a uma função que ia buscar à variável segundoDrop a lista de links para o 2o dropdown, e por aí fora, sempre assim. 😛

NCS_One · October 18, 2007 at 08:57 PM

Ois

A soluçao eh boa no caso de ter poucos arrays mas para o caso dele nao eh.

Ja viste o tamanho k ficavam os arrays para todos os distritos, localidades e ruas ?

Distritos = 18.

Cidades = 149.

Ruas = ?

E so tou a contar as cidades, ainda falta vilas e aldeias.

djthyrax · October 18, 2007 at 09:08 PM

O que tem? Vai ser gerado por PHP...

$cidades = array("Porto" => array("Porto", "Gaia"), "Lisboa" => array("Lisboa", "Oeiras"), "Aveiro" => array("Aveiro", "Espinho"));
$out = "primeiroDrop = [";
foreach($cidades as $distrito => $cidade){
    $out .= "\"$distrito\", ";
}
$out{count($out)-2}="]";
$out{count($out)-1}=";";
$out .= "\n";
$out .= "segundoDrop = {";
foreach($cidades as $distrito => $cidade){
    $out .= "\"$distrito\": [\"".implode("\", \"", $cidade)."\"],\n";
}
$out{count($out)-2}="}";
echo $out;

Algo deste género. 😛

Anyway, para o caso dele, uma vez que ele vai estamos a falar de distritos->cidade->rua, aconselho a usares AJAX. Quando seleccionam um campo do primeiro dropdown, ele faz um request ao script php para dar os detalhes a por no 2o dropdown, e é só alterar com o javascript. 😛

NCS_One · October 18, 2007 at 09:17 PM

Ois

Eu sei k ia ser feito em php mas ia ficar um exagero, pelo menos o das ruas k devem ser umas milhares nao sei.

Tb acho k deve ser melhor usar ajax.

http://www.w3schools.com/php/php_ajax_xml.asp

Neste exemplo eles usam um file xml para ter os dados, com algumas alteraçoes consegues o k queres.

djthyrax · October 18, 2007 at 09:59 PM

Ois

Eu sei k ia ser feito em php mas ia ficar um exagero, pelo menos o das ruas k devem ser umas milhares nao sei.

Tb acho k deve ser melhor usar ajax.

http://www.w3schools.com/php/php_ajax_xml.asp

Neste exemplo eles usam um file xml para ter os dados, com algumas alteraçoes consegues o k queres.

Eles aí levam o significado da sigla AJAX demasiado a sério. Para um principiante, parsar XML vai ser uma m*rda, mais vale enviar logo o conteudo que é para por na página. 😛

NCS_One · October 18, 2007 at 10:08 PM

Ois

Nao tou a dizer para ele usar xml, como disse no post anterior eles usam um file xml para ter os dados, neste caso

os dados tao numa db e com umas alteraçoes vai buscar os dados ah db.

Andrer757 · October 18, 2007 at 10:12 PM

a ideia era meter tudo em mysql de forma a por exemplo quando existisse uma estrada (ou rua) nova ao colocar na respectiva tabela ele actualiza-se os dropdowns para alem disso isto é para fazer um form para introduzir dados numa tabela de mysql também pois, isto é para um site de informação de transito.

explicando melhor a ideia é ter esses 4 dropdowns tal como expliquei no 1º texto, para depois inserir essa informação na tabela das noticias. formulário esse com as 4 dropdowns e uma textarea para a descrição e ainda outros campos, a única coisa é que se eu não fizer assim, imaginem uma dropdown com todas as ruas e autoestradas de portugal. pronto mas vou estudar isso do ajax mas não sei se irá funcionar.

Se eu conseguir por a funcionar depois digo alguma aqui.

Obrigado.

NCS_One · October 18, 2007 at 10:26 PM

Ois

A dropdown nao vai ter todas as ruas de Portugal mas vai ter de ter todas as ruas da cidade escolhida, antes de haver uma cidade

escolhida a dropdown das ruas vai tar desactivada, quando o utilizador escolher a cidade vais ah db buscar as ruas dessa cidade e poes no

dropdown das ruas.

Desde ja te digo k se a cidade escolhida for Lisboa ou outra grande cidade a dropdown das ruas vai ficar muito grande, secalhar vais ter de dividir essas

grandes cidades por zonas afim de a dropdown das ruas ficar mais pequena.

Andrer757 · October 25, 2007 at 08:42 PM

a solução encontrada:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="css/emx_nav_left.css" type="text/css" rel="stylesheet" /> 
<title>TeleTráfego admin</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
<SCRIPT language="JavaScript">
function reload(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
self.location='infr.php?cat=' + val ;
}
function reload2(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
var val2=form.subcat.options[form.subcat.options.selectedIndex].value; 

self.location='infr.php?cat=' + val + '&cat2=' + val2 ;
}
function reload3(form)
{
var val=form.cat.options[form.cat.options.selectedIndex].value; 
var val2=form.subcat.options[form.subcat.options.selectedIndex].value; 
var val3=form.subcat2.options[form.subcat3.options.selectedIndex].value; 

self.location='infr.php?cat=' + val + '&cat2=' + val2 + '&cat3=' + val3 ;
}
</script>
</head>
<body>
<?
mysql_select_db($database_aratransito, $aratransito) or die ("could not open db".mysql_error());
$tipo = mysql_query("SELECT * FROM tipo ORDER BY cod_tipo ASC");
$quer = mysql_query("SELECT * FROM regioes ORDER BY cod_reg ASC"); 
if(isset($_GET['cat']) and strlen($_GET['cat']) > 0){
$cat = mysql_real_escape_string($_GET['cat']);
$quer2 = mysql_query("SELECT * FROM localidades WHERE cod_reg=$cat ORDER BY cod_local ASC"); 
}
if (isset($_GET['cat2']) and strlen($_GET['cat2']) > 0) {
$cat2 = mysql_real_escape_string($_GET['cat2']);
$quer3 = mysql_query("SELECT * FROM arterias WHERE cod_local=$cat2 ORDER BY cod_art ASC"); 
}
if (isset($_GET['cat3']) and strlen($_GET['cat3']) > 0) {
$cat3 = mysql_real_escape_string($_GET['cat3']);
$quer4 = mysql_query("SELECT * FROM sentido WHERE cod_art=$cat3 ORDER BY cod_sent ASC"); 
}
?>
<form method='POST' name='f1' action='<?php echo $editFormAction; ?>'>
<table align="center" cellpadding="1" cellspacing="1" border="0" class="style1">
  <tr>
    <th align="left">Região: </th>
    <td>
        <select name='cat' onchange="reload(this.form)">
            <option value=''>Select one</option>
            <?
            while($regioes = mysql_fetch_array($quer)) { 
                if((isset($_GET['cat'])) && ($regioes['cod_reg']==$_GET['cat'])){
                    echo "	<option selected value='".$regioes['cod_reg']."'>".$regioes['regiao']."</option>";
                } else {
                    echo "	<option value='".$regioes['cod_reg']."'>".$regioes['regiao']."</option>";
                }
            }
            ?>
        </select>
    </td>
  </tr>
  <tr>
    <th align="left">Localidade: </th>
    <td>
        <select name='subcat' onchange="reload2(this.form)">
            <option value=''>Select one</option>
            <?
            while ($sentido = mysql_fetch_array($quer2)) { 
                if ((isset($_GET['cat2'])) && ($sentido['cod_local']==$_GET['cat2'])) {
                    echo "<option selected value='".$sentido['cod_local']."'>".$sentido['localidade']."</option>";
                } else {
                    echo  "<option value='".$sentido['cod_local']."'>".$sentido['localidade']."</option>";
                }
            }
            ?>
        </select>
    </td>
  </tr>
  <tr>
    <th align="left">Artéria: </th>
    <td>
        <select name='subcat3' onchange="reload3(this.form)">
            <option value=''>Select one</option>
            <?
            while($arteria = mysql_fetch_array($quer3)) {
                if ((isset($_GET['cat3'])) && ($sentido['cod_art']==$_GET['cat3'])) {
                    echo "<option selected value='".$sentido['cod_art']."'>".$sentido['arteria']."</option>";
                } else {
                    echo "<option value='".$sentido['cod_art']."'>".$sentido['arteria']."</option>";
                }
            }
            ?>
        </select>
    </td>
  </tr>
  <tr>
    <th align="left">Sentido: </th>
    <td>
        <select name='subcat4'>
            <option value=''>Select one</option>
            <?
            while($sentido = mysql_fetch_array($quer4)) { 
                echo  "<option value='".$sentido['cod_sent']."'>".$sentido['sentido']."</option>";
            }
            ?>
        </select>
    </td>
  </tr>
  <tr>
    <th align="left">Gravidade: </th>
    <td>
        <select name="gravidade">
        	<option value=''>Select one</option>
        	<option value="5">Muito Alta</option>
        	<option value="4">Alta</option>
        	<option value="3">Média</option>
        	<option value="2">Baixa</option>
        	<option value="1">Com pouca importância</option>
        </select>
    </td>
  </tr>
  <tr>
    <th align="left">Tipo: </th>
    <td>
        <select name="tipo">
        	<option value=''>Select one</option>
            <?
            while ($resultado = mysql_fetch_array($tipo)) { 
                echo "<option value='".$resultado['cod_tipo']."'>".$resultado['tipo']."</option>";
            }
            ?>
        </select>
    </td>
  </tr>
  <tr>
    <th align="left">Mapa: </th>
    <td><input type="text" name="mapa" size="50"></td>
  </tr>
  <tr>
    <th align="left">Descrição: </th>
    <td><textarea name="desc"></textarea></td>
  </tr>
  <tr>
    <th align="left">Nota (caso exista): </th>
    <td><textarea name="nota"></textarea></td>
  </tr>
  <tr>
    <td colspan="2">
        <input type="hidden" value="<? echo gmdate("d/m/Y"); ?>" name="data" />
        <input type="hidden" value="<? echo time(); ?>" name="hora" />
        <input type="submit" value="Inserir" />
    </td>
  </tr>
</table>
<input type="hidden" name="MM_insert" value="f1" />
</form>
</body>
</html>

Andrer757 · October 26, 2007 at 02:34 PM

Se encontrarem uma solução melhor e com menos código digam 😄

Sistema de 4 dropdowns interligadas e com mysql

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information