แสดงจังหวัด อำเภอ และตำบล ใน Select(List/Menu) (Combobox)
หลังจากที่ได้เสิร์ชดูในเนตเรื่องของการใช้ Select(List/Menu) แสดงจังหวัด อำเภอ ตำบล ก็มีหลายเว็บเหมือนกันครับที่เขียนเรื่องนี้ แต่โค๊ดมันไม่ค่อยยืดหยุ่นซักเท่าไหร่ครับ โค๊ดจากเว็บgoragodดูโอเคที่สุดแล้วครับ แต่เสียดายที่เขาใช้ GAJAX (AJAX Framework ฝีมือเขาเอง) ซึ่งผมเองก็ไม่ถนัดการใช้งานเลย และขี้เกียจที่จะต้องไปศึกษาใหม่ ผมก็เลยดัดแปลงให้เป็น jQuery และใช้ AJAX Framework ของ jQuery ช่วยในการAsynchronousกับdatabaseครับ
อันดับแรกให้ดาวน์โหลดเทเบิลจังหวัด,อำเภอ และตำบล มาติดตั้งในdatabaseของท่านก่อนครับ->http://www.4shared.com/rar/_wAIZSd8/province_utf_sql.html จะได้เทเบิลชื่อ province , amphur และtumbon ครับ
จากนั้นให้สร้างไฟล์ขึ้นมา 2 ไฟล์ ตั้งชื่อ provinceshow.php,province.php
ไฟล์ provinceshow.php -> เป็นไฟล์ที่รับค่า Request จากไฟล์ province.php ซึ่งค่าพารามิเตอร์ที่ส่งมาจะเป็น id ของจังหวัดหรืออำเภอ แล้วนำมาระบุในเงื่อนของการแสดงผลข้อมูล ซึ่งค่าที่ส่งมาจะเป็นAJAX และคืนค่าเป็นรูปแบบ XML ครับ ให้เขียนคำสั่งดังนี้
<?php
header("content-type: text/xml; charset=UTF-8");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
echo "<province>";
// ค่าที่รับมา หรือค่าจังหวัด ตำบล อำเภอที่เลือก
$city = $_GET[city];
$amphur = $_GET[amphur];
// ติดต่อฐานข้อมูล
$hostname_conn = "localhost";
$username_conn = "root";
$password_conn = "root";
$database_conn = "db_province";
mysql_connect($hostname_conn, $username_conn, $password_conn);
mysql_query("SET NAMES utf8");
mysql_select_db($database_conn); // เลือกฐานข้อมูล
echo "<city>";
$sql = "SELECT id, name FROM province ORDER BY name ASC";
$result = mysql_query($sql);
while ($fetcharr = mysql_fetch_array($result)) {
echo "<a$fetcharr[id]>$fetcharr[id]_$fetcharr[name]</a$fetcharr[id]>";
}
echo "</city>";
echo "<amphur>";
$sql = "SELECT id, name FROM amphur WHERE provinceID='$city'";
$result = mysql_query($sql);
while ($fetcharr = mysql_fetch_array($result)) {
echo "<a$fetcharr[id]>$fetcharr[id]_$fetcharr[name]</a$fetcharr[id]>";
}
echo "</amphur>";
echo "<tumbon>";
$sql = "SELECT id, name FROM tumbon WHERE amphurID='$amphur'";
$result = mysql_query($sql);
while ($fetcharr = mysql_fetch_array($result)) {
echo "<a$fetcharr[id]>$fetcharr[id]_$fetcharr[name]</a$fetcharr[id]>";
}
echo "</tumbon>";
echo "</province>";
mysql_free_result($result);
mysql_close();
?>
ไฟล์ province.php ->เป็นไฟล์ที่เราจะเขียนโค๊ด jQuery + AJAX ในไฟล์นี้ครับ เพื่อร้องขอ (Request) ข้อมูลจังหวัด, อำเภอ, และตำบลมาแสดงใน Select(List/Menu) ของเราครับ ให้เขียนโค๊ดตามนี้
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$_province=function(Obj){
var city = $('#city');
var amphur = $('#amphur');
var tumbon = $('#tumbon');
if(Obj.attr('id')=='city'){//ตรวจสอบการคลิก list menu จังหวัด
var query = 'city=' + city.val();
}else if(Obj.attr('id')=='amphur'){//ตรวจสอบการคลิก list menu อำเภอ
var query = 'city=' + city.val() + '&hur=' + amphur.val();
}else{//ค่าเริ่มต้น
var query = 'city=' + city.val() + '&hur=' + amphur.val() + '&tumbon=' + tumbon.val();
}
$.ajax({
url:"provinceshow.php?"+query,//ร้องขอข้อมูล
dataType: 'xml',//รับข้อมูลแบบxml
success: function(data) {
var cityNode=$(data).find("city");
var items = cityNode.find('*');
$_addSelectOption(city,items,city.val());
var amphurNode=$(data).find("amphur");
var items = amphurNode.find('*');
$_addSelectOption(amphur,items,amphur.val());
var tumbonNode=$(data).find("tumbon");
var items = tumbonNode.find('*');
$_addSelectOption(tumbon,items,tumbon.val());
}
});
}
$_addSelectOption=function(obj,items,selected){
var obj_op=obj.find('option');
obj_op.each(function(){//ลบoptionของ list menu
if($(this).val()!=""){
$(this).remove();
}
});
items.each(function(){
var itemsplit=$(this).text().split("_");
var iTemSelect=selected==itemsplit[0]?'selected="selected"':"";
obj.append('<option value="'+itemsplit[0]+'" '+iTemSelect+'>'+itemsplit[1]+'</option>');
});
}
$(document).ready(function(){
$('#city ,#amphur').change(function(){
$_province($(this));
});
$_province($('#city'));
});
</script>
<title>เลือกที่อยู่</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p><select id="city" name="city"><option value="">--เลือกจังหวัด--</option></select></p>
<p><select id="amphur" name="amphur"><option value="">--เลือกอำเภอ--</option></select></p>
<p><select id="tumbon" name="tumbon"><option value="">--เลือกตำบล--</option></select></p>
<p><input type="submit" name="btsend" value="ส่ง"/></p>
</form>
</body>
</html>
DEMO->http://panuwat.orgfree.com/province/provice.php
ผมมีปัญหาในการแสดงตำบลครับ
ตอบลบคือเลือกจังหวัดและอำเภอแล้ว
แต่ตำบลไม่ขึ้น เหมือนหาไม่เจอ
ลองเช็คดูโค๊ดตอนส่งค่าแสดงตำบลดูครับ
ลบให้เช็คคำสั่งนี้ครับ $sql = "SELECT id, name FROM tumbon WHERE amphurID='$amphur'";
การทำงานจะเป็นแบบ Ajax ครับ ถ้าใช้ Firebug ให้ไปที่ Tab Console เลือก Enabled เพื่อดูการทำงานของมันครับ
ยังไม่ออกเลยครับ
ลบผมว่า SQL ถูกแล้วนะ
ขอบคุณที่แจ้งให้ทราบครับ ตอนนี้แก้ให้แล้ว
ลบมีปัญหาตอนแปลงCodeให้เป็น special character เพื่อเอามาใส่ในblogครับ
ทำงานได้ถูกต้องแล้วครับ
ลบขอบคุณเช่นกันครับ
:)
แล้ว ถ้า แบบ ว่า ทำลง หลาย ตารางละคับ เก็บ หลาย ตารางอะคับ ทำไง อะคับ
ตอบลบหมายถึงบันทึกลงตารางอื่น เช่น ตารางลูกค้าหรือครับที่ต้องเก็บที่อยู่ จังหวัด อำเภอ ตำบล
ลบแค่สร้างฟิลด์เพิ่มในตารางลูกค้า 1 ฟิลด์ก็พอครับ เก็บแค่ id ตำบลก็พอ ส่วนอำเภอ จังหวัด สามารถนำมา join กับตารางตำบลได้ครับเพื่อแสดงข้อมูล
ขอบคุณ..อย่างแรงครับ..
ตอบลบไม่ขึ้นอะไรเลยครับ ตั้งแต่จังหวัดเลยครับ
ตอบลบเรียก path jquery.js ถูกหรือป่าวครับ
ลบแล้วเรียก path jquery.js เรียกยังไง
ตอบลบไฟล์ province.php เปลี่ยนคำสั่ง
ลบ<script type="text/javascript" src="jquery.js"></script>
เป็น
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
มีวิธีเอาข้อมูลใส่ในตัวแปรหรือเปล่าครับ
ตอบลบหมายถึงข้อมูลของจังหวัด/อำเภอ/ตำบล เก็บไว้ในตัวแปร ใช่ไหมครับ
ลบคำตอบคือทำได้ครับ โดยใช้ตัวแปรแบบอาร์เรย์ครับ
หรือใช้หลักการจัดเก็บแบบ xml ,json ก็ได้ครับ
ตามคำถามคับ คือยังไง พอจะมีตัวอย่างไหมคับ ผมไม่เข้าใจคับ
ลบพอดีผมโหลดฐานข้อมูลมาไม่ได้ครับ...
ตอบลบโหลดฐานข้อมูลไม่ได้ค่ะ
ตอบลบความคิดเห็นนี้ถูกผู้เขียนลบ
ตอบลบช่วยหน่อยครับ
ตอบลบhttp://www.mx7.com/view2/z69fLKpPpXLsl4QR
ตามรูปน่ะครับ
คือผมอยาทราบว่า id ตัวไหนเป็นของเทเบิ้ลไหนอ่ะครับ พอดีผมจะเปลี่ยนชื่อ id เป็น Pid , Aid , Tid ไรงี้ครับ
อยากทราบว่า มันคือตัวไหนลองสุ่มเปลี่ยนก็ไม่ได้อยู่ดี
ขอบคุณครับ
ความคิดเห็นนี้ถูกผู้เขียนลบ
ตอบลบเวลาจะ Query เพื่อนำมาแก้ไข(update) จังหวัดแสดง, อำเภอแสดง แต่ตำบล..แสดงเฉพาะ ตัวแรก..ตลอด..ไม่ตรงตัว ID ที่ต้องการให้แสดงครับ...
ตอบลบOkay ทำได้แล้วครับ..แค่เปลี่ยนบรรทันนี้
ตอบลบ$(document).ready(function(){
$('#city ,#amphur').change(function(){
$_province($(this));
});
//$_province($('#city')); << ลบออก
$_province($('#tumbon')); << ใส่แทน
});