Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[AJAX/PHP/MySQL] Multi dropdown

Szukasz dobrego skryptu? Ściągnąłeś skrypt i nie wiesz co dalej z nim robić? Masz problem z konfiguracją bądź modyfikacją? Tutaj znajdziesz pomoc z dostosowaniem najpopularniejszych skryptów (phpBB, Joomla, WordPress, itd).

[AJAX/PHP/MySQL] Multi dropdown

Post 12.11.2017, 01:09:16

Witam,
Potrzebuję zrobić wyszukiwarkę na wzór tej ze strony http://www.hakpol.pl/oferta.html. Znalazłem skrypt, który nadawałby się do przeróbki (http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/, niestety nie za bardzo mi się to udaje, ponieważ ni w ząb nie znam ajax'a.
configure.php
Kod: Zaznacz cały
<?php
// display all error except deprecated and notice 
error_reporting( E_ALL & ~E_DEPRECATED & ~E_NOTICE );
// turn on output buffering
ob_start();

define('DB_DRIVER', 'mysql');
define("DB_HOST", "localhost");
define("DB_USER", "root");
define("DB_PASSWORD", "");
define("DB_DATABASE", "sampletest");

// basic options for PDO
$dboptions = array(
    PDO::ATTR_PERSISTENT => FALSE,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
);

//connect with the server
try {
    $DB = new PDO(DB_DRIVER . ':host=' . DB_HOST . ';dbname=' . DB_DATABASE, DB_USER, DB_PASSWORD, $dboptions);
} catch (Exception $ex) {
    echo($ex->getMessage());
    die;
}

?>

fetch_state.php
Kod: Zaznacz cały
<?php
require("configure.php");
$country_id = ($_REQUEST["country_id"] <> "") ? trim($_REQUEST["country_id"]) : "";
if ($country_id <> "") {
    $sql = "SELECT * FROM tbl_state WHERE country_id = :cid ORDER BY state_name";
    try {
        $stmt = $DB->prepare($sql);
        $stmt->bindValue(":cid", trim($country_id));
        $stmt->execute();
        $results = $stmt->fetchAll();
    } catch (Exception $ex) {
        echo($ex->getMessage());
    }
    if (count($results) > 0) {
        ?>
        <label>State:
            <select name="state" onchange="showCity(this);">
                <option value="">Please Select</option>
                <?php foreach ($results as $rs) { ?>
                    <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["state_name"]; ?></option>
                <?php } ?>
            </select>
        </label>
        <?php
    }
}
?>

fetch_city.php
Kod: Zaznacz cały
<?php
require("configure.php");
$state_id = ($_REQUEST["state_id"] <> "") ? trim($_REQUEST["state_id"]) : "";
if ($state_id <> "") {
    $sql = "SELECT * FROM tbl_city WHERE state_id = :sid ORDER BY city_name";
    try {
        $stmt = $DB->prepare($sql);
        $stmt->bindValue(":sid", trim($state_id));
        $stmt->execute();
        $results = $stmt->fetchAll();
    } catch (Exception $ex) {
        echo($ex->getMessage());
    }
     if (count($results) > 0) {
        ?>
        <label>City:
            <select name="city" name="box">
                <option value="">Please Select</option>
                <?php foreach ($results as $rs) { ?>
                    <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["city_name"]; ?></option>
                <?php } ?>
            </select>
        </label>
        <?php
    }
}
?>

index.php
Kod: Zaznacz cały
<?php
require("configure.php");
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
                    <table style="margin:0 auto;width:50%" >
                        <tr>
                            <td align="center" height="50">
                                <?php
                                $sql = "SELECT * FROM tbl_country ORDER BY country_name";
                                try {
                                    $stmt = $DB->prepare($sql);
                                    $stmt->execute();
                                    $results = $stmt->fetchAll();
                                } catch (Exception $ex) {
                                    echo($ex->getMessage());
                                }
                                ?>
                                <label>Country:
                                    <select name="country" onChange="showState(this);">
                                        <option value="">Please Select</option>
                                        <?php foreach ($results as $rs) { ?>
                                            <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["country_name"]; ?></option>
                                        <?php } ?>
                                    </select>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" height="50"><div id="output1"></div> </td>
                        </tr>
                        <tr>
                            <td align="center" height="50"><div id="output2"></div> </td>
                        </tr>
                    </table>

        <script src="jquery-1.9.0.min.js"></script>
        <script>
                    function showState(sel) {
                        var country_id = sel.options[sel.selectedIndex].value;
                        $("#output1").html("");
                        $("#output2").html("");
                        if (country_id.length > 0) {

                            $.ajax({
                                type: "POST",
                                url: "fetch_state.php",
                                data: "country_id=" + country_id,
                                cache: false,
                                beforeSend: function() {
                                    $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
                                },
                                success: function(html) {
                                    $("#output1").html(html);
                               }
                            });
                        }
                    }

                    function showCity(sel) {
                        var state_id = sel.options[sel.selectedIndex].value;
                        if (state_id.length > 0) {
                            $.ajax({
                                type: "POST",
                                url: "fetch_city.php",
                                data: "state_id=" + state_id,
                                cache: false,
                                beforeSend: function() {
                                    $('#output2').html('<img src="loader.gif" alt="" width="24" height="24">');
                                },
                                success: function(html) {
                                    $("#output2").html(html);
                                }
                            });
                        } else {
                            $("#output2").html("");
                        }
                    }
        </script>
    </body>
</html>

Chciałbym żeby od razu były widoczne wszystkie 3 listy rozwijane, a wyniki z bazy danych od samego początku wyświetlały się pod listą.
Avatar użytkownikaPrzemo75
Posty: 125
Dołączył(a): 23.04.2004
Lokalizacja: POLSKA

Re: [AJAX/PHP/MySQL] Multi dropdown

Post 15.11.2017, 16:09:58

Witam,
Załączam zaktualizowany, w pełni działający kod. Pewnie można go jeszcze zoptymalizować, ale to już raczej dla tych lepiej znających się w temacie.

plik index.php
Kod: Zaznacz cały
<?php
include_once 'dbconfig.php';
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Dependent Select Box using jQuery and PHP</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   // function to get all records from table
   function getAll(){
      
      $.ajax
      ({
         url: 'pokaz.php',
         data: 'action=showAll',
         cache: false,
         success: function(r)
         {
            $("#display").html(r);
         }
      });         
   }
   
   getAll();
   // function to get all records from table
   

   $(".country").change(function()
   {
      var id=$(this).val();
      var dataString = 'id='+ id + '&action=country';
      $.ajax
      ({
         type: "POST",
         url: "get_state.php",
         data: dataString,
         cache: false,
         success: function(html)
         {
            $(".state").html(html);
         }
      });

      $.ajax
      ({
         type: "POST",
         url: "pokaz.php",
         data: dataString,
         cache: false,
         success: function(r)
         {
            $("#display").html(r);
         }
      });
   });
   
   
   $(".state").change(function()
   {
      var id=$(this).val();
      var dataString = 'id='+ id + '&action=state';
      $.ajax
      ({
         type: "POST",
         url: "get_city.php",
         data: dataString,
         cache: false,
         success: function(html)
         {
            $(".city").html(html);
         }
      });

      $.ajax
      ({
         type: "POST",
         url: "pokaz.php",
         data: dataString,
         cache: false,
         success: function(r)
         {
            $("#display").html(r);
         }
      });
   });
   
   
   $(".city").change(function()
   {
      var id=$(this).val();
      var dataString = 'id='+ id + '&action=city';
      $.ajax
      ({
         type: "POST",
         url: "get_city.php",
         data: dataString,
         cache: false,
         success: function(html)
         {
            $(".city").html(html);
         }
      });

      $.ajax
      ({
         type: "POST",
         url: "pokaz.php",
         data: dataString,
         cache: false,
         success: function(r)
         {
            $("#display").html(r);
         }
      });
   });
   
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
   margin-top:20px;
}
select
{
   width:150px;
   height:25px;
}
</style>
</head>

<body>
<center>
<div>
<label>Country :</label>
<select name="country" class="country">
<option selected="selected">--Państwo--</option>
<?php
include_once 'get_country.php';
?>
</select>

<label>State :</label> <select name="state" class="state">
<option selected="selected">--Stan--</option>
</select>


<label>City :</label> <select name="city" class="city">
<option selected="selected">--Miasto--</option>
</select>

</div>
    <div class="" id="display">
       <!-- Records will be displayed here -->
    </div>
</center>
</body>
</html>

plik pokaz.php
Kod: Zaznacz cały
<?php

   include('dbconfig.php');

   $action = $_REQUEST['action'];
   
   if ($action=='showAll')   
   {
      $id = "0";
   }
   else $id=$_POST['id'];
   
   echo "Akcja: $action i id: $id \n";
   
   if($action=="showAll"){
      $stmt=$DB_con->prepare('SELECT * FROM tbl_country');
      $stmt->execute();
   }
   elseif($action=="country"){
      $stmt = $DB_con->prepare('SELECT * FROM tbl_state WHERE country_id=:id');
      $stmt->execute(array(':id' => $id));
   }
   elseif($action=="state"){
      $stmt=$DB_con->prepare('SELECT * FROM tbl_city WHERE state_id=:id ORDER BY city_name');
      $stmt->execute(array(':id'=>$id));
   }
   elseif($action=="city"){
      $stmt=$DB_con->prepare('SELECT * FROM tbl_city WHERE city_id=:id ORDER BY city_name');
      $stmt->execute(array(':id'=>$id));
   }
   else{
      $stmt=$DB_con->prepare('SELECT * FROM tbl_country');
      $stmt->execute();
   }
   
?>
   <div class="row">
   <?php
   if($stmt->rowCount() > 0)
   {   
      while($row=$stmt->fetch(PDO::FETCH_ASSOC))
      {
         extract($row);   
         ?>
      <?php
      if($action=="showAll")
         {
            ?>
            <div class="col-xs-3">
            <div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;">Kraj:: <?php echo $action; ?> :: <?php echo $country_name; ?></div><br />
            </div>
            <?php      
         }
      elseif($action=="country")
         {
            ?>
            <div class="col-xs-3">
            <div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;">Kraj:: <?php echo $action; ?> :: <?php echo $state_name; ?></div><br />
            </div>
            <?php      
         }
      elseif($action=="state")
         {   
            ?>
            <div class="col-xs-3">
            <div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;">Stan:: <?php echo $action; ?> :: <?php echo $city_name; ?></div><br />
            </div>
            <?php      
         }
      elseif($action=="city")
         {
            ?>
            <div class="col-xs-3">
            <div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;">Miasto:: <?php echo $action; ?> :: <?php echo $city_id; ?></div><br />
            </div>
            <?php   
         }
      }
   }   else
      {
         ?>
         <div class="col-xs-3">
         <div style="border-radius:3px; border:#cdcdcd solid 1px; padding:22px;">Wszystko:: <?php echo $action; ?> :: <?php echo $country_name; ?></div><br />
         </div>
         <?php   
      }
         ?>
   </div>

plik get_coutry.php
Kod: Zaznacz cały
<?php
   $stmt = $DB_con->prepare("SELECT * FROM tbl_country");
   $stmt->execute();
   while($row=$stmt->fetch(PDO::FETCH_ASSOC))
   {
      ?>
        <option value="<?php echo $row['country_id']; ?>"><?php echo $row['country_name']; ?></option>
        <?php
   }
?>

plik get_state.php
Kod: Zaznacz cały
<?php
include('dbconfig.php');
if($_POST['id'])
{
   $id=$_POST['id'];
   $action=$_POST['action'];
   $stmt = $DB_con->prepare("SELECT * FROM tbl_state WHERE country_id=:id");
   $stmt->execute(array(':id' => $id));
   ?><option selected="selected">Stan :</option><?php
   while($row=$stmt->fetch(PDO::FETCH_ASSOC))
   {
      ?>
        <option value="<?php echo $row['state_id']; ?>"><?php echo $row['state_name']; ?></option>
        <?php
   }
}
?>

plik get_city.php
Kod: Zaznacz cały
<?php
include('dbconfig.php');
if($_POST['id'])
{
   $id=$_POST['id'];
   $action=$_POST['action'];
   $stmt = $DB_con->prepare("SELECT * FROM tbl_city WHERE state_id=:id");
   $stmt->execute(array(':id' => $id));
   ?><option selected="selected">Miasto :</option><?php
   while($row=$stmt->fetch(PDO::FETCH_ASSOC))
   {
      ?>
      <option value="<?php echo $row['city_id']; ?>"><?php echo $row['city_name']; ?></option>
      <?php
   }
}
?>

plik dbconfig.php
Kod: Zaznacz cały
<?php

$DB_host = "localhost";
$DB_user = "root";
$DB_pass = "";
$DB_name = "dbcountries";

try
{
   $DB_con = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass);
   $DB_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
   $e->getMessage();
}

plik dbcountries.sql
Kod: Zaznacz cały
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;


CREATE TABLE IF NOT EXISTS `tbl_city` (
  `city_id` int(3) NOT NULL AUTO_INCREMENT,
  `state_id` int(3) NOT NULL,
  `city_name` varchar(35) NOT NULL,
  PRIMARY KEY (`city_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

INSERT INTO `tbl_city` (`city_id`, `state_id`, `city_name`) VALUES
(1, 1, 'Surat'),
(2, 1, 'Ahmedabad'),
(3, 2, 'Pune'),
(4, 2, 'Mumbai'),
(5, 3, 'royston'),
(6, 3, 'bedford'),
(7, 4, 'Litherland'),
(8, 4, 'ST. helens'),
(9, 5, 'Abbeville'),
(10, 5, 'Alpine'),
(11, 6, 'Angoon'),
(12, 6, 'Aniak');


CREATE TABLE IF NOT EXISTS `tbl_country` (
  `country_id` int(3) NOT NULL AUTO_INCREMENT,
  `country_name` varchar(25) NOT NULL,
  PRIMARY KEY (`country_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

INSERT INTO `tbl_country` (`country_id`, `country_name`) VALUES
(1, 'India'),
(2, 'United kingdom'),
(3, 'United States');


CREATE TABLE IF NOT EXISTS `tbl_state` (
  `state_id` int(3) NOT NULL AUTO_INCREMENT,
  `country_id` int(3) NOT NULL,
  `state_name` varchar(35) NOT NULL,
  PRIMARY KEY (`state_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

INSERT INTO `tbl_state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 1, 'Gujarat'),
(2, 1, 'Maharashtra'),
(3, 2, 'Cambridge'),
(4, 2, 'Liverpool'),
(5, 3, 'Alabama'),
(6, 3, 'Alaska');
Avatar użytkownikaPrzemo75
Posty: 125
Dołączył(a): 23.04.2004
Lokalizacja: POLSKA


Powrót do Scripts Support


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 1 gość

Hosting, Domeny, SSL

Subskrypcja

Mamy 50698 zarejestrowanych użytkowników.
Najnowszy użytkownik: m1kie


Nasi użytkownicy napisali:

  • 936100 wiadomości
  • w 246729 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)