基於上一個選擇的jquery下拉選項

Question

基於上一個下拉選擇可以從數據庫獲取數據嗎？

例如：

<select id="paramscountries" class="chzn-done" style="display: none;" name="params[countries][]" multiple="true" size="10"> 
    <option value="1">Afghanistan</option> 
    <option value="2">Albania</option> 
    <option value="3">Algeria</option> 
    <option value="4">USA</option> 
</select> 

如果我從上面的列表中選擇美國就會進行查詢&得到所有國家的數據庫名。例如來自states.php &將在另一個下拉選擇中顯示所有狀態名稱而不重新加載該頁面。

Answer 1

竟被你d需要使用Javascript或jQuery來使用它，並使用它發佈到將返回結果的頁面。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<select id="paramscountries" class="chzn-done" style="display: block;" onchange="getNewList($(this).val());" name="params[countries][]" multiple="true" size="10"> 
    <option value="1">Afghanistan</option> 
    <option value="2">Albania</option> 
    <option value="3">Algeria</option> 
    <option value="4">USA</option> 
</select> 

<select name="states" id="states"> 
</select> 

<script type="text/javascript"> 
function getNewList(country) { 
    $.post('post.api.php', {'api': 'getStates', 'countries': country}, function(response) { 
     var obj = $.pareseJSON(response); 
     $('#states').html(obj.states); 
    }); 
} 

post.api.php頁

<?php 

if(isset($_POST['api'])){ 

    if($_POST['api'] == 'getStates'){ 

     // sdet the countries array to a variable 
     $countries = $_POST['countries']; 

     // set a variable to hold the results 
     $results = array(); 

     // query your db 
     $stm = $db->prepare('SELECT * FROM `your_database` WHERE `country` IN("'.implode('","', $countries).'")'); 
     $stm->execute(); 
     if($stm->rowCount() > 0){ 
      foreach($stm->fetchAll(PDO::FETCH_ASSOC) as $row){ 
       $results['states'] .= '<option value="'.$row['stateName'].'">'.$row['stateName'].'</option>'; 
      } 
     }    
     echo json_encode($results); 
    } 

} 

我會做這樣的事情。希望這裏有足夠的空間讓你滾動。

Answer 2

嘗試使用jquery ajax請求。像這樣

jQuery的

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('#paramscountries').change(function(){ 
     $.ajax({ 
      url: 'states.php' 
      ,data:{val: $(this).val()} 
      ,dataType:'json' 
      ,type: 'POST' 
      ,success:function(data){ 
       for(var i = 0; i < data.length; i++){ 
        var dropDownValue = '<option value="'+ data[i] +'">'+ data[i] +'</option>' 
        $('#secondDropDownList').append(dropDownValue); 
       } 
      } 
     }); 
    }); 
}); 
</script> 

在states.php

$con=mysqli_connect("localhost","user","password","db_Name"); 
if (mysqli_connect_errno()) { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 
if(isset($POST['val'])){ 
$var = $_POST['val']; 
$result = mysqli_query($con,"SELECT * FROM table_name WHERE table_column_name = '$var'"); 
$arr = array(); 
while($row = mysqli_fetch_array($result)) { 
    $arr[] = $row['name']; 
} 
echo json_encode($arr); 
} 
mysqli_close($con); 

在HTML

<select id="secondDropDownList"></select>