2017-01-26 21 views
-1

我想知道我怎麼可以將三個下拉列表在一起。我想讓用戶選擇國家,然後選擇州,然後選擇城市。其實我試過多種方法,但我所做的波紋管:鏈接下拉列表與HTML + PHP + MySQL的

<div class="row"> 
    <div class="col-sm-4"><div class="form-group"> 
    <label for="countries">Country</label> 
    <select class="form-control" id="countries"> 
<?php 
$servername = "localhost"; 
$username = "root"; 
$password = "123"; 
$dbname = "countries"; 


$conn = new mysqli($servername, $username, $password, $dbname);  
$sql = "SELECT * FROM countries"; 
$result = $conn->query($sql); 

//echo "<select id='countries'>"; 
while ($row = $result->fetch_assoc()) { 
    echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>"; 
} 
//echo "</select>"; 

$conn->close();?> 
    </select> 
</div></div> 
    <div class="col-sm-4"><div class="form-group"> 
    <label for="countries">State</label> 
    <select class="form-control" id="states"> 
<?php 
$servername = "localhost"; 
$username = "root"; 
$password = "123"; 
$dbname = "countries"; 


// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
if($_POST['submit'] && $_POST['submit'] != 0) 
{ 
    $countries=$_POST['countries']; 
} 
//echo "Connected successfully"; 
$sql = "SELECT * FROM regions where country_id = $countries"; 
$result = $conn->query($sql); 

//echo "<select id='states'>"; 
while ($row = $result->fetch_assoc()) { 
    echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>"; 
} 
//echo "</select>"; 

$conn->close();?> 
    </select> 
</div></div> 
</div> 

我需要做的是使三個下拉列表(其中2如上圖所示),首先讓用戶選擇國家,那麼第二個下拉菜單顯示了基於用戶選擇的州/地區,並最終根據選定的州選擇城市。請告訴我這樣做的解決方案。

+0

我真的不明白這個問題。你能添加一些信息嗎?什麼不起作用?你想要發生什麼?編輯:我想你想過濾下一個選擇字段取決於之前的選擇?如果這就是你想要的,你必須使用AJAX。 –

+0

我有這個解決方案,但我做了PDO –

+2

你應該看看Ajax:使用JavaScript檢測選擇何時更改並向服務器發出請求以獲取其他選擇/數據。然後,根據從服務器返回的內容替換/修改過期的選擇。 – jeroen

回答

-1

在這種情況下,你應該使用AJAX。平變化(選擇),您可以發送一個XMLHttpRequest(JS)到一個單獨的PHP文件,它返回你需要(例如,作爲JSON)數據,並將其插入到你的網站有JS。

例子:

<script type="text/javascript"> 
    function filtern() 
    { 
    region = document.getElementById("feld1").value; 

    xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() 
    { 
     if(xhr.readyState==4 && xhr.status==200) 
     { 
     filtered_region = JSON.parse(xhr.responseText); 
     document.getElementById("select1").innerHTML = ""; 
     for(i=0;i<filtered_region.length;i++) 
     { 
      document.getElementById("select1").innerHTML += "<option>"+filtered_region[i]+"</option>"; 
     } 
     } 
    } 
    xhr.open("GET","get_your_data.php?region="+region,true); 
    xhr.send(); 
    } 
    </script> 

    <form> 
    <p>Feld1: <input type="text" name="feld1" id="feld1" onchange="filtern()" /></p> 
    <select name="select1" id="select1"></select> 
    </form> 

get_your_data.php返回要顯示的數據。

1

我寫的代碼,這一段最後一年,你需要的是使用AJAX,對change event

請不是我寫了使用PDO我知道你需要mysqli的,但卻我沒有太多的時間來重新寫全 事情的mysqli我的解決方案

但我希望你將看到如何做到這一點的邏輯,希望你可以把它轉換自己沒有喧囂到mysqli的。

我的索引文件

<script src="jquery.min.js"></script> 
<?php require 'db_config.php';?> 

<script type="text/javascript"> 
    $('#country').on('change', function() { 
      var countryID = $(this).val(); 
      if (countryID) { 
       $.ajax({ 
        type: 'POST', 
        url: 'locations.php', 
        data: 'country_id=' + countryID, 
        success: function(html) { 
         $('#state').html(html); 
         $('#city').html('<option value="">Select state first</option>'); 
        } 
       }); 
      } else { 
       $('#state').html('<option value="">Select country first</option>'); 
       $('#city').html('<option value="">Select state first</option>'); 
      } 

      $(this).remove('has-errors'); 
     }); 

     $('#state').on('change', function() { 
      var stateID = $(this).val(); 
      if (stateID) { 
       $.ajax({ 
        type: 'POST', 
        url: 'locations.php', 
        data: 'state=' + stateID, 
        success: function(html) { 
         $('#city').html(html); 
        } 
       }); 
      } else { 
       $('#city').html('<option value="">Select city first</option>'); 
      } 
     }); 
</script> 
<form method="POST" action="" id="reg_form"> 
<select name="country" id="country" class="input"> 
     <option value="0">Select country</option> 
     <?php 

      $stmt= $dbh->Prepare("SELECT countryID, countryName FROM countries ORDER BY countryName ASC"); 

      $stmt->execute(); 

      $results= $stmt->Fetchall(PDO::FETCH_ASSOC); 

      if(count($results) > 0){ 
       foreach($results as $row){ 
        echo '<option value="'.$row['countryID'].'">'.$row['countryName'].'</option>'; 
       } 
      }else{ 
       echo '<option value="">country not available</option>'; 
      } 
      ?> 
    </select> 
    <select name="state" id="state" class="input"> 
     <option value="">Select country first</option> 
    </select> 
    <select name="city" id="city" class="input"> 
     <option value="">Select state first</option> 
    </select> 
</form> 

locations.php

<?php 
/** 
* Created by PhpStorm. 
* User: Masivuye 
* Date: 2016/12/19 
* Time: 11:27 AM 
*/ 
require 'db_config.php'; 


if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){ 


    $sql=$dbh->prepare("SELECT DISTINCT states.stateID,states.stateName from states INNER JOIN countries ON states.countryID = ? "); 
    $sql->bindValue(1,$_POST['country_id']); 
    $sql->execute(); 

    $results =$sql->fetchall(PDO::FETCH_ASSOC); 

    if(count($results) > 0){ 

     echo '<option value="0">Select state</option>'; 
     foreach($results as $row){ 
      echo '<option value="'.$row['stateID'].'">'.$row['stateName'].'</option>'; 
    } 

    }else{ 
     echo '<option value="">state not available</option>'; 
    } 


} 

if(isset($_POST["state"]) && !empty($_POST["state"])){ 


    $sql=$dbh->prepare("SELECT DISTINCT cities.cityID,cities.cityName,cities.stateID from cities INNER JOIN states ON cities.stateID= ? "); 
$sql->bindValue(1,$_POST['state']); 
$sql->execute(); 

$results =$sql->fetchall(PDO::FETCH_ASSOC); 

if(count($results) > 0){ 

     echo '<option value="0">Select City</option>'; 
     foreach($results as $row){ 
      echo '<option value="'.$row['cityID'].'">'.$row['cityName'].'</option>'; 
    } 

}else{ 
     echo '<option value="">city not available</option>'; 
    } 
} 
?> 

db_config.php

<?php 


    $servername = "localhost"; 
    $username = "hidden"; 
    $password = "hidden"; 
    $dbname  = "mytestDB"; 


    try { 

     $dbh= new PDO("mysql:host=$servername;dbname=$dbname",$username,$password); 
     $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION); 


    } catch (PDOException $e) { 

     echo "Could not connect".$e->getMessage(); 
     error_log($e); 

    } 

?> 

我的表

CREATE TABLE IF NOT EXISTS `states` (
    `stateID` int(6) NOT NULL AUTO_INCREMENT, 
    `stateName` varchar(255) NOT NULL, 
    `countryID` int(6) NOT NULL, 
    PRIMARY KEY (`stateID`) 
) ENGINE=InnoDB DEFAULT CHARSET=latin1; 

-- 
-- Dumping data for table `states` 
-- 

INSERT INTO `states` (`stateID`, `stateName`, `countryID`) VALUES 
(3, 'Western Cape', 2), 
(4, 'Eastern Cape', 1), 
(5, 'North West', 2), 
(6, 'Northen Cape', 2); 


-- 
-- Table structure for table `cities` 
-- 

CREATE TABLE IF NOT EXISTS `cities` (
    `cityID` int(6) NOT NULL AUTO_INCREMENT, 
    `cityName` varchar(255) NOT NULL, 
    `stateID` int(6) NOT NULL, 
    PRIMARY KEY (`cityID`) 
) ENGINE=InnoDB DEFAULT CHARSET=latin1; 

-- 
-- Dumping data for table `cities` 
-- 

INSERT INTO `cities` (`cityID`, `cityName`, `stateID`) VALUES 
(1, 'Cape Town', 3), 
(2, 'East London', 4); 



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

-- 
-- Table structure for table `countries` 
-- 

CREATE TABLE IF NOT EXISTS `countries` (
    `countryID` int(6) NOT NULL AUTO_INCREMENT, 
    `countryName` varchar(255) NOT NULL, 
    PRIMARY KEY (`countryID`) 
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ; 

-- 
-- Dumping data for table `countries` 
-- 

INSERT INTO `countries` (`countryID`, `countryName`) VALUES 
(1, 'South Africa'), 
(2, 'Zambia'), 
(3, 'Zimbabwe '), 
(4, 'Uganda'), 
(5, 'USA'), 
(6, 'Brazil'), 
(7, 'India'), 
(8, 'Austrilia'), 
(9, 'Ghana'); 

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

注意:使用您自己的字符集上的表,你可以使用UTF-8

希望這將指向你到正確的方向,也希望其他SO用戶將幫助地方我錯過了什麼。

0

你可以實現你想要的一個多種方式,但你必須讓你的代碼中的許多改進。

例如,你可以在腳本之上建立連接而不是多次(無論你需要什麼)。你也可以像這樣在腳本的頂部從數據庫表中獲取數據。

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "test"; 

$conn = new mysqli($servername, $username, $password, $dbname);  

$sql = "SELECT * FROM countries"; 
$result = $conn->query($sql); 
$countries = $result->fetch_all(MYSQLI_ASSOC); 

$sql = "SELECT * FROM regions"; 
$result = $conn->query($sql); 

$regions = $result->fetch_all(MYSQLI_ASSOC); 
?> 

然後在下面添加你的html代碼。

<div class="row"> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
      <label for="countries">Country</label> 
      <select class="form-control" id="countries" onchange="refreshPage(this)"> 
       <option value=""> Select Country</option> 
      <?php foreach($countries as $country): ?> 
       <option value="<?= $country['id'] ?>" ><?= $country['name'] ?></option> 
      <?php endforeach; ?> 
      </select> 
     </div> 

     <div class="form-group"> 
      <label for="regions">Region</label> 
      <select class="form-control" id="regions"> 
      <option value=""> Select Region</option> 
      <?php foreach($regions as $region): ?> 
       <option value="<?= $region['id'] ?>"><?= $region['name'] ?></option> 
      <?php endforeach; ?> 
      </select> 
     </div> 
    </div> 
</div> 

你想相關的國家和地區,以便您可以使用JavaScript,甚至jQuery的(如果你想)分別提取區域。或者在選擇國家時刷新頁面,如。 (心中對國家refreshPage()上述方法選擇框。)

<script> 
    function refreshPage(object) 
    { 
     var country_id = object.options[object.selectedIndex].value; 

     if (country_id != '') { 
      window.location.href = '?country_id='+country_id;   
     } 
    } 
</script> 

現在,你必須只取COUNTRY_ID從$ _GET值篩選的區域。完整的代碼如下所示。

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "test"; 

$conn = new mysqli($servername, $username, $password, $dbname);  

$sql = "SELECT * FROM countries"; 
$result = $conn->query($sql); 
$countries = $result->fetch_all(MYSQLI_ASSOC); 

$where = ""; 

if (isset($_GET['country_id']) && $_GET['country_id'] != '') { 
    $where = " WHERE country_id = '{$_GET['country_id']}'"; 
} 

$sql = "SELECT * FROM regions {$where}"; 
$result = $conn->query($sql); 

$regions = $result->fetch_all(MYSQLI_ASSOC); 
?> 

<div class="row"> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
      <label for="countries">Country</label> 
      <select class="form-control" id="countries" onchange="refreshPage(this)"> 
       <option value=""> Select Country</option> 
      <?php foreach($countries as $country): ?> 
       <option value="<?= $country['id'] ?>" <?php echo isset($_GET['country_id']) && $_GET['country_id'] == $country['id'] ? 'selected' : ''; ?> ><?= $country['name'] ?></option> 
      <?php endforeach; ?> 
      </select> 
     </div> 

     <div class="form-group"> 
      <label for="regions">Region</label> 
      <select class="form-control" id="regions"> 
      <option value=""> Select Region</option> 
      <?php foreach($regions as $region): ?> 
       <option value="<?= $region['id'] ?>"><?= $region['name'] ?></option> 
      <?php endforeach; ?> 
      </select> 
     </div> 
    </div> 
</div> 

<script> 
    function refreshPage(object) 
    { 
     var country_id = object.options[object.selectedIndex].value; 

     if (country_id != '') { 
      window.location.href = '?country_id='+country_id;   
     } 
    } 
</script> 

這段代碼的主要問題是,它不是防止任何SQL注入,並在許多方面脆弱。您必須使用PDO而不是mysqli,並使用準備好的語句來過濾區域。