การสร้าง Dropdownlist ที่อยู่ ภาค/จังหวัด/อำเภอ/ตำบล ด้วย jQuery จะดีตรงที่สามารถใช้ทั้งใน form เพิ่มใหม่ และ form การแก้ไข โดยที่ไม่ต้องเปลี่ยนแปลง code มากนัก ดังตัวอย่าง (
download ตัวอย่าง )
1. form เพิ่มใหม่
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var geo_id = <?php echo isset($_POST['geo_id'])
?intval($_POST['geo_id']):'0'; ?>;
var province_id = <?php echo isset($_POST['province_id'])
?intval($_POST['province_id']):'0'; ?>; //default 76=นราธิวาส province_id
var amphur_id = <?php echo isset($_POST['amphur_id'])
?intval($_POST['amphur_id']):'0'; ?>; //default 987=บาเจาะ amphur_id
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(
'#geo_id',
'geo_combo.php?load=geo',
geo_id
);
loadSelectBox(
'#province_id',
'geo_combo.php?load=province&geo_id='+geo_id,
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
);
$('#geo_id').change(function(e){
var selected = e.target.value;
loadSelectBox(
'#province_id',
'geo_combo.php?load=province&geo_id='+selected,
0 );
$('#amphur_id :not(option:first)').remove(); //add
$('#district_id :not(option:first)').remove(); //add
});
$('#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>
<div align="center">
<b><font size="5">บันทึกข้อมูลรายใหม่</font></b>
</div>
<form name="form1" action="#" method="POST" >
<table class="table table-bordered">
<tr class="active"><td align=left>
<?= str_repeat(' ', 3);?>
ชื่อ <input type="text" size="30" name="fname" class="form-control" />
<?= str_repeat(' ', 3);?>
นามสกุล <input type="text" size="30" name="lname" class="form-control" />
<?= str_repeat(' ', 3);?>
<br><br>
<?= str_repeat(' ', 3);?>
บ้านเลขที่ <input type="text" size="10" name="ban_no" class="form-control"/>
<?= str_repeat(' ', 3);?>
บ้าน/ชุมชน <input type="text" size="20" name="ban_name" class="form-control"/>
<?= str_repeat(' ', 3);?>
หมู่ <input type="text" size="2" name="moo" class="form-control"/>
<br><br>
<?= str_repeat(' ', 3);?>
ภาค
<select id="geo_id" name="geo_id" class="form-control">
<option value="0">- เลือกภาค -</option>
</select>
<?= str_repeat(' ', 3);?>
จังหวัด <select id="province_id" name="province_id" class="form-control">
<option value="0">-- เลือกจังหวัด --</option>
</select>
<?= str_repeat(' ', 3);?>
อำเภอ <select id="amphur_id" name="amphur_id" class="form-control">
<option value="0">-- เลือกอำเภอ --</option>
</select>
<?= str_repeat(' ', 3);?>
ตำบล <select id="district_id" name="district_id" class="form-control">
<option value="0">-- เลือกตำบล --</option>
</select>
<tr class="active"><td align=center>
<br>
<input TYPE="submit" value=" บันทึก " class="btn btn-success btn-lg" />
</td></tr>
</table>
</form>
</body>
</html>
2. form แก้ไข
การแก้ไขข้อมูลให้ใช้ไฟล์เดิม(form เพิ่มใหม่) โดยที่เปลียนแปลงcodeเฉพาะส่วน(แทนที่codeเดิม) ดังนี้
<? include('db_inc.php');
//ดึงค่าเดิมจาก table มาเป็นค่า deafult แทนค่า 0
//เช่น เก็บเป็นตัวแปร $default_geo_id , $default_province_id, $default_amphur_id ,$default_district_id
$default_geo_id='6';
$default_province_id='76';
$default_amphur_id='987';
$default_district_id='8795';
?>
var geo_id = <?php echo isset($_POST['geo_id'])
?intval($_POST['geo_id']):$default_geo_id; ?>; //default 6=ภาคใต้ geo_id
var province_id = <?php echo isset($_POST['province_id'])
?intval($_POST['province_id']):$default_province_id; ?>; //default 76=นราธิวาส province_id
var amphur_id = <?php echo isset($_POST['amphur_id'])
?intval($_POST['amphur_id']):$default_amphur_id; ?>; //default 987=บาเจาะ amphur_id
var district_id = <?php echo isset($_POST['district_id'])
?intval($_POST['district_id']):$default_district_id; ?>; //default 8795=บาเระเหนือ district_id
3. ไฟล์หลักสำหรับสร้างข้อมูลใน Dropdown ชื่อ geo_combo.php ดังนี้
<?php
header('Content-type:text/html;charset=UTF-8');
//require_once 'config.inc.php';
require_once 'db_inc.php';
if (!isset($_GET['load'])){
$_GET['load'] = 'province';
}
switch($_GET['load']){
case 'geo':
$r = mysql_query("SELECT * FROM `sys_geography`") or report();
echo '<option value="0">-- เลือกภาค --</option>';
while ($row = mysql_fetch_assoc($r)){
echo '<option value="',$row['GEO_ID'],'">', $row['GEO_NAME'], '</option>';
}
break;
case 'province':
$province_id = isset($_GET['geo_id'])?intval($_GET['geo_id']):0;
$r = mysql_query("SELECT * FROM `sys_province` WHERE `GEO_ID`=$geo_id") 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 `sys_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 `sys_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>');
}
?>
4. ไฟล์ db_inc.php ดังนี้
mysql_connect("localhost","root","test");
mysql_select_db("intervac_db");
mysql_query("SET NAMES utf8");
--creadit : http://web-programming-bookmark.blogspot.com/2010/11/dropdown-listbox-jquery.html
