config.inc.php สำหรับเก็บต่อ database mysql
geo.php สำหรับเป็นหน้าแบบฟอร์ม
geo_combo.php เป็นไฟล์ที่ geo.php ใช้โหลด tag option ให้กับ combobox ด้วยวิธี ajax
*** จะต้องบันทึกไฟล์ geo_combo.php เป็น utf8
ส่วน geo.php ให้บันทึกเป็น tis620 (ansi)
ดาวน์โหลดไฟล์ database ได้ที่ http://www.thaicreate.com/free-web-script/thailand-province-database.html
*** ได้ทำการแก้ไขโค้ด onchange ของกล่องเลือกจังหวัด โดยเพิ่มคำสั่งลบรายการตำบลของอำเภอที่ได้เลือกในครั้งก่อนทิ้งด้วย
*** เพิ่มไฟล์ตัวอย่างที่ใช้กับ asp.net (c#) http://www.ziddu.com/download/7432325/jquery-multilevel-combobox-asp.net.zip.html
*** เพื่มไฟล์ตัวอย่างที่ใช้กับ php http://www.ziddu.com/download/7660090/jquery-multilevel-combobox-php.zip.html
1. config.inc.php
<?php
mysql_connect('localhost','root','12345');
mysql_select_db('geo');
mysql_query('SET NAMES UTF8');
?>
2. geo.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" dir="ltr" lang="th" xml:lang="th">
<head>
<meta http-equiv="content-type" content="text/html; charset=tis-620" />
<meta name="Author" content="num, dragon_html[at]hotmail.com" />
<title>combobox เลือก จังหวัด ตำบล อำเภอ โดยใช้ jquery</title>
<style type="text/css">
/*<![CDATA[*/
#error {color:red}
#notice {color:green}
/*]]>*/
</style>
<!-- โหลด jquery.js มาไว้ในเครื่อง จะทำให้เว็บโหลดเร็วขึ้น -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
var province_id = <?php echo isset($_POST['province_id'])
?intval($_POST['province_id']):'0'; ?>;
var amphur_id = <?php echo isset($_POST['amphur_id'])
?intval($_POST['amphur_id']):'0'; ?>;
var district_id = <?php echo isset($_POST['district_id'])
?intval($_POST['district_id']):'0'; ?>;
function loadSelectBox(id,url,selected){
$.get(
url,{},function(data){
$(id).html(data);
if (selected!=0){
$(id+' option[value='+selected+']').attr('selected','selected');
}
}
);
}
$(function(){
loadSelectBox(
'#province_id',
'geo_combo.php?load=province',
province_id
);
loadSelectBox(
'#amphur_id',
'geo_combo.php?load=amphur&province_id='+province_id,
amphur_id
);
loadSelectBox(
'#district_id',
'geo_combo.php?load=district&hur_id='+amphur_id,
district_id
);
$('#province_id').change(function(e){
var selected = e.target.value;
loadSelectBox(
'#amphur_id',
'geo_combo.php?load=amphur&province_id='+selected,
0
);
$('#district_id :not(option:first)').remove(); //add
});
$('#amphur_id').change(function(e){
var selected = e.target.value;
loadSelectBox(
'#district_id',
'geo_combo.php?load=district&hur_id='+selected,
0
);
});
});
//]]>
</script>
</head>
<body>
<h1>combobox เลือกจังหวัด อำเภอ และตำบล โดยใช้ jquery</h1>
<?php
if (isset($_POST['title'])){
require_once 'config.inc.php';
$e = array();
$level = 'district';
// validation
if (empty($_POST['title'])){
$e[] = 'title ไม่ถูกต้อง';
}
if (empty($_POST['district_id'])){
if (empty($_POST['amphur_id'])){
if (empty($_POST['province_id'])){
$e[] = 'ไม่ได้ระบุจังหวัด';
}
$e[] = 'ไม่ได้ระบุอำเภอ';
$e[] = 'ไม่ได้ระบุตำบล';
} else {
$amphur_id = intval($_POST['amphur_id']);
$r = mysql_query("SELECT count(*) FROM `amphur` WHERE `AMPHUR_ID`=$amphur_id");
if (mysql_result($r,0)==0){
$e[] = 'อำเภอไม่ถูกต้อง';
} else {
$r = mysql_query("SELECT count(*) FROM `district` WHERE `AMPHUR_ID`=$amphur_id");
if (mysql_result($r,0)>0){
$e[] = 'ยังไม่ได้ระบุตำบล';
} else {
$level = 'amphur';
//ไม่จำเป็นต้องระบตำบลเพราะอำเภอไม่มีตำบล
}
}
}
} else {
$district_id = intval($_POST['district_id']);
$r = mysql_query("SELECT count(*) FROM `district` WHERE `DISTRICT_ID`=$district_id");
if (mysql_result($r,0)==0){
$e[] = 'ตำบลไม่ถูกต้อง';
}
}
if (count($e)>0){
echo '<div id="error">',implode('<br />',$e),'</div>';
} else {
echo "<div id=\"notice\">valid at level : $level</div>";
$district_value = 0;
if ($level == 'district'){
$r = mysql_query("SELECT * FROM `district` WHERE `DISTRICT_ID`=$district_id");
$district_value = $district_id;
$amphur_value = mysql_result($r,0,'AMPHUR_ID');
$province_value = mysql_result($r,0,'PROVINCE_ID');
} else {
$r = mysql_query("SELECT * FROM `amphur` WHERE `AMPHUR_ID`=$amphur_id");
$amphur_value = mysql_result($r,0,'AMPHUR_ID');
$province_value = mysql_result($r,0,'PROVINCE_ID');
}
//insert province_value,amphur_value,district_value and title into some table
}
}
?>
<form action="?" method="post">
news <input type="text" name="title" value="<?php textbox('title');?>" />
<br />จังหวัด <select id="province_id" name="province_id">
<option value="0">-- เลือกจังหวัด --</option>
</select>
<br />อำเภอ <select id="amphur_id" name="amphur_id">
<option value="0">-- เลือกอำเภอ --</option>
</select>
<br />ตำบล <select id="district_id" name="district_id">
<option value="0">-- เลือกตำบล --</option>
</select>
<br /> <input type="submit" value="submit" />
</form>
</body>
</html>
<?php
function textbox($name){
global $_POST;
echo isset($_POST[$name])?htmlspecialchars($_POST[$name]):'';
}
?>
3. geo_combo.php
<?php
header('Content-type:text/html;charset=UTF-8');
require_once 'config.inc.php';
if (!isset($_GET['load'])){
$_GET['load'] = 'province';
}
switch($_GET['load']){
case 'province':
$r = mysql_query("SELECT * FROM `province`") or report();
echo '<option value="0">-- เลือกจังหวัด --</option>';
while ($row = mysql_fetch_assoc($r)){
echo '<option value="',$row['PROVINCE_ID'],'">',
$row['PROVINCE_NAME'],
'</option>';
}
break;
case 'amphur':
$province_id = isset($_GET['province_id'])?intval($_GET['province_id']):0;
$r = mysql_query("SELECT * FROM `amphur` WHERE `PROVINCE_ID`=$province_id") or report();
echo '<option value="0">-- เลือกอำเภอ --</option>';
while ($row = mysql_fetch_assoc($r)){
echo '<option value="',$row['AMPHUR_ID'],'">',
$row['AMPHUR_NAME'],
'</option>';
}
break;
case 'district':
$amphur_id = isset($_GET['amphur_id'])?intval($_GET['amphur_id']):0;
$r = mysql_query("SELECT * FROM `district` WHERE `AMPHUR_ID`=$amphur_id") or report();
echo '<option value="0">-- เลือกตำบล --</option>';
while ($row = mysql_fetch_assoc($r)){
echo '<option value="',$row['DISTRICT_ID'],'">',
$row['DISTRICT_NAME'],
'</option>';
}
break;
}
function report(){
return die('<option>'.htmlspecialchars(mysql_error()).'</option>');
}
?>
โค้ดข้างบนนี้จะเป็นโค้ดสำหรับการเพิ่มข้อมูลนะครับ
หากต้องการแสดงผลข้อมูลเพื่อแก้ไขให้ทำการเปลี่ยนแปลงโค้ด
var province_id = <?php echo isset($_POST['province_id'])
?intval($_POST['province_id']):'0'; ?>;
var amphur_id = <?php echo isset($_POST['amphur_id'])
?intval($_POST['amphur_id']):'0'; ?>;
var district_id = <?php echo isset($_POST['district_id'])
?intval($_POST['district_id']):'0'; ?>;
เป็น
<?php
//ดึงข้อมูลจากตารางเพื่อมาแก้ไข
$id = (int)$_GET['id'];
$result = mysql_query("SELECT * FROM tb WHERE id='$id' ");
$row = mysql_fetch_assoc($result);
?>
//แล้วก็นำค่า id ต่างๆ ที่เกี่ยวข้องกับตำบลอำเภอและจังหวัดมาใช้เป็นค่า default ของ ตัวแปรใน javascript แทนค่า '0' ครับ
var province_id = <?php echo isset($_POST['province_id'])
?intval($_POST['province_id']):$row['province_id']; ?>;
var amphur_id = <?php echo isset($_POST['amphur_id'])
?intval($_POST['amphur_id']):$row['amphur_id']; ?>;
var district_id = <?php echo isset($_POST['district_id'])
?intval($_POST['district_id']):$row['district_id']; ?>;
เว็บที่เกี่ยวข้อง
jquery auto province
ถ้าเลือก จ.,อ.,ต. แล้วอยากให้ขึ้นรหัสไปรษณีย์อัติโนมัติทำยังไงคะ
ตอบลบความคิดเห็นนี้ถูกผู้เขียนลบ
ตอบลบ1. ในตาราง district (ตำบล) จะต้องเพิ่มฟิลด์ post_code ครับ
ตอบลบซึ่งข้อมูล รหัสไปรษณีย์ของตำบล อาจจะลองหาจากในเน็ตดูครับ
2. สร้าง textfield เช่น <input id="post_code" type="text" name="post_code"/>
3. ใน dropdownlist ตำบล ใส่คำสั่ง onchange เช่น
$(function(){
$('#district_id').change(function(){
$.get('?load=post_code&district_id='+$(this).val(),function(data){
var postcode = $.trim(data);
$('#post_code').val(postcode);
});
});
4. ในไฟล์ geo_combo.php ก็ใส่โค้ดเพิ่มเช่น
case 'post_code':
$rs = mysql_query('select post_code from distrcit where DISTRICT_ID='.intval($_GET['district_id']));
echo mysql_result($rs,0);
break;
ขอถามหน่อยคะ แล้วถ้าจะนำมาแสดงเฉยๆ ละคะ ขอบคุณคะ
ตอบลบ