วันอังคารที่ 14 กุมภาพันธ์ พ.ศ. 2555

แสดงจังหวัด อำเภอ และตำบล ใน Select(List/Menu) (Combobox)

        พอดีผมมีโอกาสได้เข้าไปอ่านบทความในเว็บ Goragod.com เรื่องของการแสดง จังหวัด อำเภอ และตำบลใน Select(List/Menu) หรือ Combobox จึงขอยืมมาดัดแปลงมาเป็นของตัวเองซักหน่อยครับ โดยเปลี่ยนจาก GAJAX มาเป็น jQuery ที่ผมถนัดแทน ^_^
        หลังจากที่ได้เสิร์ชดูในเนตเรื่องของการใช้ 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() + '&amphur=' + amphur.val();
 }else{//ค่าเริ่มต้น
  var query = 'city=' + city.val() + '&amphur=' + 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

22 ความคิดเห็น :

  1. ผมมีปัญหาในการแสดงตำบลครับ
    คือเลือกจังหวัดและอำเภอแล้ว
    แต่ตำบลไม่ขึ้น เหมือนหาไม่เจอ

    ตอบลบ
    คำตอบ
    1. ลองเช็คดูโค๊ดตอนส่งค่าแสดงตำบลดูครับ
      ให้เช็คคำสั่งนี้ครับ $sql = "SELECT id, name FROM tumbon WHERE amphurID='$amphur'";
      การทำงานจะเป็นแบบ Ajax ครับ ถ้าใช้ Firebug ให้ไปที่ Tab Console เลือก Enabled เพื่อดูการทำงานของมันครับ

      ลบ
    2. ยังไม่ออกเลยครับ
      ผมว่า SQL ถูกแล้วนะ

      ลบ
    3. ขอบคุณที่แจ้งให้ทราบครับ ตอนนี้แก้ให้แล้ว
      มีปัญหาตอนแปลงCodeให้เป็น special character เพื่อเอามาใส่ในblogครับ

      ลบ
    4. ทำงานได้ถูกต้องแล้วครับ
      ขอบคุณเช่นกันครับ
      :)

      ลบ
  2. แล้ว ถ้า แบบ ว่า ทำลง หลาย ตารางละคับ เก็บ หลาย ตารางอะคับ ทำไง อะคับ

    ตอบลบ
    คำตอบ
    1. หมายถึงบันทึกลงตารางอื่น เช่น ตารางลูกค้าหรือครับที่ต้องเก็บที่อยู่ จังหวัด อำเภอ ตำบล
      แค่สร้างฟิลด์เพิ่มในตารางลูกค้า 1 ฟิลด์ก็พอครับ เก็บแค่ id ตำบลก็พอ ส่วนอำเภอ จังหวัด สามารถนำมา join กับตารางตำบลได้ครับเพื่อแสดงข้อมูล

      ลบ
  3. ไม่ระบุชื่อ5 กันยายน 2556 16:11

    ขอบคุณ..อย่างแรงครับ..

    ตอบลบ
  4. ไม่ระบุชื่อ19 กันยายน 2556 10:22

    ไม่ขึ้นอะไรเลยครับ ตั้งแต่จังหวัดเลยครับ

    ตอบลบ
    คำตอบ
    1. เรียก path jquery.js ถูกหรือป่าวครับ

      ลบ
  5. แล้วเรียก path jquery.js เรียกยังไง

    ตอบลบ
    คำตอบ
    1. ไฟล์ province.php เปลี่ยนคำสั่ง
      <script type="text/javascript" src="jquery.js"></script>
      เป็น
      <script src="http://code.jquery.com/jquery-1.9.0.js"></script>

      ลบ
  6. ไม่ระบุชื่อ24 เมษายน 2557 04:16

    มีวิธีเอาข้อมูลใส่ในตัวแปรหรือเปล่าครับ

    ตอบลบ
    คำตอบ
    1. หมายถึงข้อมูลของจังหวัด/อำเภอ/ตำบล เก็บไว้ในตัวแปร ใช่ไหมครับ
      คำตอบคือทำได้ครับ โดยใช้ตัวแปรแบบอาร์เรย์ครับ
      หรือใช้หลักการจัดเก็บแบบ xml ,json ก็ได้ครับ

      ลบ
    2. ตามคำถามคับ คือยังไง พอจะมีตัวอย่างไหมคับ ผมไม่เข้าใจคับ

      ลบ
  7. ไม่ระบุชื่อ2 มีนาคม 2558 00:57

    พอดีผมโหลดฐานข้อมูลมาไม่ได้ครับ...

    ตอบลบ
  8. ไม่ระบุชื่อ9 กรกฎาคม 2558 15:12

    โหลดฐานข้อมูลไม่ได้ค่ะ

    ตอบลบ
  9. ความคิดเห็นนี้ถูกผู้เขียนลบ

    ตอบลบ
  10. ช่วยหน่อยครับ
    http://www.mx7.com/view2/z69fLKpPpXLsl4QR
    ตามรูปน่ะครับ

    คือผมอยาทราบว่า id ตัวไหนเป็นของเทเบิ้ลไหนอ่ะครับ พอดีผมจะเปลี่ยนชื่อ id เป็น Pid , Aid , Tid ไรงี้ครับ
    อยากทราบว่า มันคือตัวไหนลองสุ่มเปลี่ยนก็ไม่ได้อยู่ดี

    ขอบคุณครับ

    ตอบลบ
  11. ความคิดเห็นนี้ถูกผู้เขียนลบ

    ตอบลบ
  12. เวลาจะ Query เพื่อนำมาแก้ไข(update) จังหวัดแสดง, อำเภอแสดง แต่ตำบล..แสดงเฉพาะ ตัวแรก..ตลอด..ไม่ตรงตัว ID ที่ต้องการให้แสดงครับ...

    ตอบลบ
  13. Okay ทำได้แล้วครับ..แค่เปลี่ยนบรรทันนี้
    $(document).ready(function(){
    $('#city ,#amphur').change(function(){
    $_province($(this));
    });
    //$_province($('#city')); << ลบออก
    $_province($('#tumbon')); << ใส่แทน
    });

    ตอบลบ