หลังจากที่ได้เสิร์ชดูในเนตเรื่องของการใช้ 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')); << ใส่แทน
});