Select dinamiche in Ajax (valori prelevati da DataBase)

**masdel1979** · 23-05-2007, 11:14

Questa seconda versione, invece, ha tre select in cascata (invece di due); esempio:

- seleziono il Continente
- poi selezione la Nazione
- poi seleziono la Città

Nome Database: test

Nome Tabella: l1 (tabella Continenti)

Codice PHP:


-- phpMyAdmin SQL Dump

-- version 2.10.0.2

-- [url]http://www.phpmyadmin.net[/url]

-- 

-- Host: localhost

-- Generato il: 23 Mag, 2007 at 10:54 AM

-- Versione MySQL: 5.0.37

-- Versione PHP: 5.2.1



SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";



-- 

-- Database: `test`

-- 



-- --------------------------------------------------------



-- 

-- Struttura della tabella `l1`

-- 



CREATE TABLE `l1` (

  `l1_id` int(11) NOT NULL auto_increment,

  `l1_name` text collate latin1_general_ci NOT NULL,

  `l1_link` text collate latin1_general_ci NOT NULL,

  `l1_order` int(11) NOT NULL,

  PRIMARY KEY  (`l1_id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=6 ;



-- 

-- Dump dei dati per la tabella `l1`

-- 



INSERT INTO `l1` VALUES (1, 'America', '', 100);

INSERT INTO `l1` VALUES (2, 'Europa', '', 200);

INSERT INTO `l1` VALUES (3, 'Asia', '', 300);

INSERT INTO `l1` VALUES (4, 'Oceania', '', 400);

INSERT INTO `l1` VALUES (5, 'Africa', '', 500);

Nome Tabella: l2 (tabella Stati)

Codice PHP:


-- phpMyAdmin SQL Dump

-- version 2.10.0.2

-- [url]http://www.phpmyadmin.net[/url]

-- 

-- Host: localhost

-- Generato il: 23 Mag, 2007 at 10:54 AM

-- Versione MySQL: 5.0.37

-- Versione PHP: 5.2.1



SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";



-- 

-- Database: `test`

-- 



-- --------------------------------------------------------



-- 

-- Struttura della tabella `l2`

-- 



CREATE TABLE `l2` (

  `l2_id` int(11) NOT NULL auto_increment,

  `l2_name` text collate latin1_general_ci NOT NULL,

  `l2_link` text collate latin1_general_ci NOT NULL,

  `l2_order` int(11) NOT NULL,

  `l2_l1id` int(11) NOT NULL,

  PRIMARY KEY  (`l2_id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=9 ;



-- 

-- Dump dei dati per la tabella `l2`

-- 



INSERT INTO `l2` VALUES (1, 'Giappone', '', 100, 3);

INSERT INTO `l2` VALUES (2, 'Cina', '', 200, 3);

INSERT INTO `l2` VALUES (3, 'Mongolia', '', 300, 3);

INSERT INTO `l2` VALUES (4, 'Stati Uniti', '', 100, 1);

INSERT INTO `l2` VALUES (5, 'Canada', '', 200, 1);

INSERT INTO `l2` VALUES (6, 'Messico', '', 300, 1);

INSERT INTO `l2` VALUES (7, 'Italia', '', 100, 2);

INSERT INTO `l2` VALUES (8, 'Spagna', '', 200, 2);

Nome Tabella: l3 (tabella Città)

Codice PHP:


-- phpMyAdmin SQL Dump

-- version 2.10.0.2

-- [url]http://www.phpmyadmin.net[/url]

-- 

-- Host: localhost

-- Generato il: 23 Mag, 2007 at 10:54 AM

-- Versione MySQL: 5.0.37

-- Versione PHP: 5.2.1



SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";



-- 

-- Database: `test`

-- 



-- --------------------------------------------------------



-- 

-- Struttura della tabella `l3`

-- 



CREATE TABLE `l3` (

  `l3_id` int(11) NOT NULL auto_increment,

  `l3_name` text collate latin1_general_ci NOT NULL,

  `l3_link` text collate latin1_general_ci NOT NULL,

  `l3_order` int(11) NOT NULL,

  `l3_l2id` int(11) NOT NULL,

  PRIMARY KEY  (`l3_id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=6 ;



-- 

-- Dump dei dati per la tabella `l3`

-- 



INSERT INTO `l3` VALUES (1, 'Tokio', '', 100, 1);

INSERT INTO `l3` VALUES (2, 'Osaka', '', 200, 1);

INSERT INTO `l3` VALUES (3, 'Kanagawa', '', 300, 1);

INSERT INTO `l3` VALUES (4, 'Roma', '', 100, 7);

INSERT INTO `l3` VALUES (5, 'Milano', '', 200, 7);

Ed ecco i file che servono:

- index.php

Codice PHP:


<?

  include('inc/conn.inc.php');

  include('inc/class/select.class.php');

  $obj = new select();

  $l1 = $obj->getL1();

?>

<!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" lang="it">

<head>

    <title>Select dinamiche con dati provenienti da Database</title>

<script type="text/javascript">



var http = createRequestObject();

var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;



function createRequestObject() {

     var ro;

     var browser = navigator.appName;

     if(browser == "Microsoft Internet Explorer"){

          ro = new ActiveXObject("Microsoft.XMLHTTP");

     }else{

          ro = new XMLHttpRequest();

     }

     return ro;

}



function addElement(ogg,val,text){

  var newOption;

  newOption = document.createElement("option");

  newOption.value = val;

  newOption.text = text;

  ogg.add(newOption, where);    

}



function removeElement(ogg){

  if(ogg.options.length > 0){

    while (ogg.options.length) {

      ogg.remove(0);

    }    

  }

}



function disabledElement(ogg,val){

  document.getElementById(ogg).disabled = val;

}



function loadingState(oggId){

  var id = document.getElementById(oggId).value;

  var City = document.getElementById('l3');

  // inizializzazione Città  

  removeElement(City);

  addElement(City,'sel','Seleziona una Città:');

  disabledElement('l3',true);

  http.open('GET','getState.php?id='+id, true);

  http.onreadystatechange = getState;

  http.send(null);  

}



function loadingCity(oggId){

  var id = document.getElementById(oggId).value;

  http.open('GET','getCity.php?id='+id, true);

  http.onreadystatechange = getCity;

  http.send(null);  

}



function getState(){

  var State = document.getElementById('l2');

  removeElement(State);

  id = document.getElementById('l1').value;

  if(id == 'sel'){

    disabledElement('l2',true);

    addElement(State,'sel','Seleziona prima un Continente:');

  }else{

    if(http.readyState == 4){

      if (http.status == 200) {

           var response = http.responseText;

        if(response == ''){

          disabledElement('l2',true);

          addElement(State,'sel','Nessuno Stato Presente');

        }else{

          removeElement(State);

          coppia = response.split(',');

          max = coppia.length;

          addElement(State,'sel','Seleziona uno Stato:');

          for(x=0;x<max;x++){

            val = coppia[x].split('-');

            addElement(State,val[0],val[1]);

          }

          disabledElement('l2',false);

        }

         }

    }else{

      addElement(State,'sel','Loading...');

    }

  }

}



function getCity(){

  var City = document.getElementById('l3');

  removeElement(City);

  id = document.getElementById('l2').value;

  if(id == 'sel'){

    disabledElement('l3',true);

    addElement(City,'sel','Seleziona una Città:');

  }else{

    if(http.readyState == 4){

      if (http.status == 200) {

           var response = http.responseText;

        if(response == ''){

          disabledElement('l3',true);

          addElement(City,'sel','Nessuna voce');

        }else{

          removeElement(City);

          coppia = response.split(',');

          max = coppia.length;

          addElement(City,'sel','Seleziona una Città:');

          for(x=0;x<max;x++){

            val = coppia[x].split('-');

            addElement(City,val[0],val[1]);

          }

          disabledElement('l3',false);

        }

         }

    }else{

      addElement(City,'sel','Loading...');

    }

  }

}

</script>



</head>

<body>

<form name="form">

<div id="content">

  <div id="label1">

    Select 1

  </div>

  <div id="select1">

    <select name="l1" id="l1" onChange="loadingState('l1')">

     <option value="sel" selected="selected">Seleziona un Continente:</option>

     <?

       for($x=0;$x<count($l1);$x++){

     ?>

     <option value="<?=$l1[$x]['l1_id']?>"><?=$l1[$x]['l1_name']?></option>

     <?

       }

     ?>

    </select> 

  </div>

  <div id="label2">

    Select 2

  </div>

  <div id="select2">

    <select name="l2" id="l2" onChange="loadingCity('l2')" disabled>

    <option value="sel" selected="selected">Seleziona uno Stato:</option>

    </select>  

  </div>  

  <div id="label3">

    Select 3

  </div>

  <div id="select3">

    <select name="l3" id="l3" disabled>

    <option value="sel" selected="selected">Seleziona una Città:</option>

    </select>  

  </div>    

</div>

</form>

</body>

</html>

- getCity.php

Codice PHP:


<?

  include('inc/conn.inc.php');

  include('inc/class/select.class.php');

  $id = $_REQUEST['id'];

  //$id = 7;

  $obj = new select();

  $l3 = $obj->getL3($id);

  $Js = '';

  for($y=0;$y<count($l3);$y++){

    if($y < (count($l3)-1)){

      $end = ",";

    }else{

      $end = "";

    }

    $Js .= $l3[$y]['l3_id']."-".$l3[$y]['l3_name'].$end;

  }

  echo $Js; 

?>

- getState.php

Codice PHP:


<?

  include('inc/conn.inc.php');

  include('inc/class/select.class.php');

  $id = $_REQUEST['id'];

  $obj = new select();

  $l1 = $obj->getL1($id);

  $Js = '';

  for($x=0; $x<count($l1); $x++){

    $l2 = $obj->getL2($l1[$x]['l1_id']);

    for($y=0;$y<count($l2);$y++){

      if($y < (count($l2)-1)){

        $end = ",";

      }else{

        $end = "";

      }

      $Js .= $l2[$y]['l2_id']."-".$l2[$y]['l2_name'].$end;

    }

  }   

  //echo "text";

  echo $Js; 

?>

- inc/conn.inc.php (creare la cartella inc)

Codice PHP:


<?php

  // Inizio - Connessione DataBase

  $host = 'localhost';

  $login = 'root';

  $password = 'password';

  $db = 'test';

  $conn = mysql_connect($host,$login,$password);

  mysql_select_db($db,$conn);

  // Fine - Connessione DataBase

?>

- inc/class/select.class.php (creare la cartella class dentro inc)

Codice PHP:


<?php

class select{



  function select(){

  }

  

  function getL1($id=''){

    if(!empty($id)){

      $sSQL = "SELECT * FROM l1 WHERE l1_id = $id";

    }else{

      $sSQL = "SELECT * FROM l1 Order by l1_order";

    }    

    $ris = mysql_query($sSQL);

    while($row = mysql_fetch_assoc($ris)){

      $list[] = array('l1_id' => $row["l1_id"],

                      'l1_name' => $row["l1_name"]);    

    }    

    return $list;    

  }

  

  function getL2($id){

    $sSQL = "SELECT * FROM l2 WHERE l2_l1id = $id Order By l2_order";

    $ris = mysql_query($sSQL);

    while ($row = mysql_fetch_assoc($ris)) {

      $list[] = array('l2_id' => $row["l2_id"],

                      'l2_name' => $row["l2_name"]);

    }

    return $list;    

  }

  

  function getL3($id){

    $sSQL = "SELECT * FROM l3 WHERE l3_l2id = $id Order By l3_order";

    $ris = mysql_query($sSQL);

    while ($row = mysql_fetch_assoc($ris)) {

      $list[] = array('l3_id' => $row["l3_id"],

                      'l3_name' => $row["l3_name"]);

    }

    return $list;    

  }    

    

}

?>

Ho fatto delle modifiche significative al Javascript e ho cambiato alcune cose alla classe in php

Vi saluto Max

Discussione: Select dinamiche in Ajax (valori prelevati da DataBase)

Strumenti discussione

Ricerca discussione

Visualizza

Visualizzazione discussione

Nel frattempo... pubblico la seconda versione

Permessi di invio