巨大的數據庫列表

Question

的替代方案好的，我有三個表格，其中包含世界各國的國家和我的註冊表格的城市。問題是這些城市的名單太龐大了。它總共包含48,314個條目。所以我的網站被吊死，瀏覽器顯示停止腳本的消息。我使用Mozilla瀏覽器的目的。

這是我使用來獲取城市，州和國家代碼：

$country = "SELECT * FROM countries"; 
$country = $pdo->prepare($country); 
$country->execute(); 

$state = "SELECT * FROM states"; 
$state = $pdo->prepare($state); 
$state->execute(); 

$city = "SELECT * FROM cities"; 
$citq = $pdo->prepare($city); 
$citq->execute(); 

這是我的jQuery代碼：

$(document).ready(function() { 
    $("#country").change(function() { 
     if ($(this).data('options') == undefined) { 
     $(this).data('options', $('#state option').clone()); 
     } 
     var id = $(this).val(); 
     var options = $(this).data('options').filter('[value=' + id + ']'); 
     $('#state').html('<option value="">Select State</option>').append(options); 
    }); 
    $("#state").change(function() { 
     if ($(this).data('options') == undefined) { 
     $(this).data('options', $('#city option').clone()); 
     } 
     var id = $(this).val(); 
     var options = $(this).data('options').filter('[value=' + id + ']'); 
     $('#city').html('<option value="">Select City</option>').append(options); 
    }); 
}); 

這是我的HTML：

<select name="country" id="country"> 
<option value="">Select Country</option> 
<?php while($i = $country->fetch()){ extract($i); ?> 
<option value="<?php echo $id; ?>"><?php echo $name; ?></option> 
<?php } ?> 
</select> 

<select name="state" id="state"> 
<option value="">Select State</option> 
<?php while($j = $state->fetch()){ extract($j); ?> 
<option value="<?php echo $country_id; ?>" data="<?php echo $id; ?>"><?php echo $name; ?></option> 
<?php } ?> 
</select> 

<select name="city" id="city"> 
<option value="">Select City</option> 
<?php while($k = $citq->fetch()){ extract($k); ?> 
<option value="<?php echo $id ; ?>" data="<?php echo $state_id; ?>"><?php echo $name ; ?></option> 
<?php } ?> 
</select> 

現在任何人都可以請幫助我得到一個解決方案，如何我可以完全順利地加載它沒有得到我的網站吊死每當頁面刷新？

Answer 1

您可以在「父」選擇後動態加載州和城市。這會減少數據量。 沒有明確的代碼，因爲我想你知道你在做什麼，但這個想法：

-> [html] select 
-> [js] onChange call php with ajax 
-> [php] SQL select states where country="chosencountry" 
-> [js] update form/selectbox 

編輯：（代碼）

JS：

<script> 
     function BuildSelectbox(job,parent) { 

       try { req = window.XMLHttpRequest?new XMLHttpRequest(): 
         new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { /* No AJAX Support */ } 

       req.open('get','subselects.php?job='+job+'&parent='+parent); 

       /* let the php echo the resultvalue */ 

       req.onreadystatechange = function() { 
       handleResponse(div); 
       }; 
       req.send(null); 
     } 

     function handleResponse(div) { 


       if ((req.readyState == 4) && (req.status == 200)) { 
        document.getElementById(job).value=req.responseText; 
       } 
     } 
</script> 

PHP部分：（subselects.php ）

<? 
if ($_GET["job"]=="states") { 

// assuming there is a key country in states 
$state = "SELECT * FROM states where country=".$_GET["parent"]; 
$state = $pdo->prepare($state); 
$state->execute(); 

} else { 

// assuming there is a key state in cities 
$city = "SELECT * FROM cities where state=".$_GET["parent"]; 
$citq = $pdo->prepare($city); 
$citq->execute(); 
} 

// echo the whole selectbox 
echo '<select id="'.$_GET["job"].'">'; 
// put the option loop from your queryresult here 
echo '</select>';  

?> 

HTML：

<div id="countries" onChange="BuildSelectbox('states',this.selectedIndex);> 
<select name="country" id="country"> 
<option value="">Select Country</option> 
<?php while($i = $country->fetch()){ extract($i); ?> 
<option value="<?php echo $id; ?>"><?php echo $name; ?></option> 
<?php } ?> 
</select> 
</div> 

<div id="states"></div> 
<div id="cities"></div> 

這會動態生成完整的選擇框，並將它們放入空白的「div」狀態和「城市」中。當然你需要在php代碼中輸出selectbox。國家的父母是國家和城市的父母是國家。希望這可以解釋它。