巨大なデータベースのリストの代わり

Question

私は3つのテーブルを持っています。リストは世界の国々の州と私の登録フォームの都市です。問題は、都市のリストが大きすぎるということです。合計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 

EDIT：（コード）

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> 

これは、完全な選択ボックスを動的に生成し、それらを空のdivsステートと「都市」に配置します。もちろん、PHPコード内の選択ボックスを出力する必要があります。州の親は国であり、都市の親は州です。これがそれを説明することを願っています