GORAGOD.com

freelance, web developer, web designer, hosting, domain name

คำถาม Combobox เลือก จังหวัด อำเภอ ตำบล (UTF-8)

steamlose S.K

Combobox เลือก จังหวัด อำเภอ ตำบล (UTF-8)

จาก code อาจารย์เขียนเป็น ให้เลือกจังหวัด อำเภอ ตำบล นะครับ
ทีนี้ผมจะให้ เป็น ให้เลือก ตำบลก่อน และตามด้วย อำเภอ จังหวัด ตามลำดับ
ผมกลับตัวแปรเรียบร้อย และผมจะให้รันแบบให้เลือกแค่ ตำบลอย่างเดียว แล้วอำเภอ จังหวัด ก็ออกมาอัตโนมัติ
ตอนนี้เมื่อเลือกตำบล  อำเภอ ก็ออก แต่ จังหวัดต้องคลิกเลือกที่ ช่องตำบลอีกครั้งหนึ่งถึงจะออกมา ครับ ไม่ทราบว่าต้องแก้ ตรงไหนครับ

code index.php ครับ

<body>
<?php   echo   "จังหวัด :".$_POST['province'];
     echo  "อำเภอ :".$_POST['amphur'];
     echo  "ตำบล :".$_POST['tumbon']."<br /><br />
<br />

";
     ?>
<?   
 
 echo "<form action=\"\" method=\"post\">
";
 echo '<span id="provinceDiv">';
 echo "<label for=\"province\">จังหวัด :</label><select name=\"province\" id=\"province\" onchange=\"dochange('amphur')\">
";//รายการสุดท้ายไม่ต้องมี event แล้ว
 echo "<option value=\"$province\">--------------</option>
" ;
 echo "</select></span>
";
   
 echo '<span id="amphurDiv">';
 echo "<label for=\"amphur\">อำเภอ :</label><select name=\"amphur\" id=\"amphur\" onchange=\"dochange('amphur')\">
";
 echo "<option value=\"$amphur\">--------------</option>
" ;
 echo "</select></span>
";
   
 echo '<span id="tumbonDiv">';
 echo "<label for=\"tumbon\">ตำบล :</label><select name=\"tumbon\" id=\"tumbon\" onchange=\"dochange('tumbon')\">
";
 echo "<option value=\"$tumbon\">--------------</option>
" ;
 echo "</select></span>
";
 
 echo "<br /><br /><br /><input type=\"submit\" value=\"ส่ง\" name=\"submit\" />
";
 echo "</form>
";
?>
<script type="text/javascript">
//AJAX
function Inint_AJAX()
{
 try
 {
  return new ActiveXObject( "Msxml2.XMLHTTP" );
 }
 catch ( e )
 {
 };

 try
 {
  return new ActiveXObject( "Microsoft.XMLHTTP" );
 }
 catch ( e )
 {
 };

 try
 {
  return new XMLHttpRequest();
 }
 catch ( e )
 {
 };

 alert( "XMLHttpRequest not supported" );
 return null;
};

function dochange( obj )
{
 var req = Inint_AJAX();
 var province = document.getElementById( 'province' ).value;
 var tumbon = document.getElementById( 'tumbon' ).value;
 if ( obj && obj.name == 'province' ) //เมื่อทำการเลือที่จังหวัดมา ให้เคลียร์ค่าอำเภอ
 {
  var amphur = "";
 }
 else //เลือกรายการอื่น
 {
  var amphur = document.getElementById( 'amphur' ).value;
 };
 var data = "province=" + province + "&amphur=" + amphur + "&tumbon=" + tumbon;
 req.onreadystatechange = function()
 {
  if ( req.readyState == 4 )
  {
   if ( req.status == 200 )
   {
    var datas = eval( '(' + req.responseText + ')' ); // JSON
    document.getElementById( 'provinceDiv' ).innerHTML = datas[0].province;
    document.getElementById( 'amphurDiv' ).innerHTML = datas[0].amphur;
    document.getElementById( 'tumbonDiv' ).innerHTML = datas[0].tumbon;
   };
  };
 };
 req.open( "post" , "province.php" , true ); //สร้าง connection
 req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); // set Header
 req.send( data ); //ส่งค่า
};

//โหลดครั้งแรก
window.onload = function()
{
 dochange( '' );
};
</script>
</body>
############################################

cdoe province.php ครับ

<?
 header( "Expires: Sat, 1 Jan 2005 00:00:00 GMT" );
 header( "Last-Modified: ".gmdate( "D, d M Y H:i:s" )."GMT" );
 header( "Cache-Control: no-cache, must-revalidate" );
 header( "Pragma: no-cache" );
 header( "content-type: application/x-javascript; charset=UTF-8" );

 $province = $_POST[province];
 $amphur = $_POST[amphur];
 $tumbon = $_POST[tumbon];

 $hostname_conn = "localhost";
 $username_conn = "root";
 $password_conn = "1234";
 $database_conn = "settlement";
 mysql_connect( $hostname_conn , $username_conn , $password_conn ) or die( "เชื่อมต่อฐานข้อมูลไม่ได้" );
 mysql_select_db( $database_conn ) or die( "เลือกฐานข้อมูลไม่ได้" ); // เลือกฐานข้อมูล

 //ให้คืนค่าตำบลไว้เป็นอันดับแรก
##############SET DataBase เป็น UTF-8#####################################
    $sql = 'SET CHARACTER SET utf8';
    mysql_query($sql);
    $sql ="SET collation_connection = 'utf8_general_ci' ";
    mysql_query($sql);
##############SET DataBase เป็น UTF-8#####################################
 $sql = "SELECT id_tumbon, name_tumbon FROM tumbon";
 $result = mysql_query( $sql );
 echo "[{\"tumbon\":\"";
 //echo "<label for='tumbon'>ตำบล :</label>";
 echo "<select name='tumbon' id='tumbon' onchange='dochange(this)'>";
 echo "<option value='0'>--กรุณาเลือกตำบล--</option>";
 while( $fetcharr = mysql_fetch_array( $result ) )
 {
  $id_tumbon = $fetcharr[id_tumbon];
  $name_tumbon = $fetcharr[name_tumbon];
  echo "<option value='$id_tumbon'";
  if ( $tumbon == $id_tumbon ) //เลือกตำบลที่เลือกไว้
  {
   echo " selected='selected'";
  };
  echo ">$name_tumbon</option>";
 };
 echo "</select>\",\"amphur\":\"";

 //echo "<label for='amphur'>อำเภอ :</label>";
 echo "<select name='amphur' id='amphur' onchange='dochange(this)'>";
 //ถ้ามีการเลือกจตำบลมาแล้วให้แสดงอำเภอต่อ
 if ( $tumbon != "0" && $tumbon != "" )
 {
   //echo "<option value='0'>--กรุณาเลือกอำเภอ--</option>";
##############SET DataBase เป็น UTF-8#####################################
    $sql = 'SET CHARACTER SET utf8';
    mysql_query($sql);
    $sql ="SET collation_connection = 'utf8_general_ci' ";
    mysql_query($sql);
##############SET DataBase เป็น UTF-8#####################################
  $sql = "SELECT id_amphur, name_amphur FROM amphur WHERE tumbonID='$tumbon'";
  $result = mysql_query( $sql );
  while( $fetcharr = mysql_fetch_array( $result ) )
  {
   $id_amphur = $fetcharr[id_amphur];
   $name_amphur = $fetcharr[name_amphur];
   echo "<option value='$id_amphur'";
   if ( $amphur == $id_amphur) //เลือกอำเภอที่เลือกไว้
   {
    echo " selected='selected'";
   };
   echo ">$name_amphur</option>";
  };
 }
 else
 {
  echo "<option value=''>--------------</option>";
 };

  echo "</select>\",\"province\":\"";

  //echo "<label for='province'>จังหวัด :</label>";
 echo "<select name='province' id='province'>";

 //ถ้ามีการเลือกอำเภอมาแล้วให้แสดงจังหวัด
 if ( $amphur != "0" && $amphur != "" ){
  //echo "<option value='0'>--กรุณาเลือกจังหวัด--</option>";
##############SET DataBase เป็น UTF-8#####################################
    $sql = 'SET CHARACTER SET utf8';
    mysql_query($sql);
    $sql ="SET collation_connection = 'utf8_general_ci' ";
    mysql_query($sql);
##############SET DataBase เป็น UTF-8#####################################
  $sql = "SELECT id_province, name_province FROM province WHERE amphurID=$amphur";
  $result = mysql_query( $sql );
  while( $fetcharr = mysql_fetch_array( $result ) )
  {
   $id_province = $fetcharr[id_province];
   $name_province = $fetcharr[name_province];
   echo "<option value='$id_province'";
   if ( $province == $id_province ) //เลือกจังหวัดที่เลือกไว้
   {
    echo " selected='selected'";
   };
   echo ">$name_province</option>";
  };
 }
 else
 {
  echo "<option value=''>--------------</option>";
 };
 echo "</select>\"}]"; 

 mysql_close();
?>

###########################
DB

CREATE TABLE `amphur` (
  `id_amphur` varchar(5) default NULL,
  `tumbonID` varchar(7) default NULL,
  `name_amphur` text
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- dump ตาราง `amphur`
--

INSERT INTO `amphur` VALUES ('16601', '1660106', 'เมืองอุตรดิตถ์');
INSERT INTO `amphur` VALUES ('16601', '1660105', 'เมืองอุตรดิตถ์');
INSERT INTO `amphur` VALUES ('16601', '1660104', 'เมืองอุตรดิตถ์');
INSERT INTO `amphur` VALUES ('16601', '1660103', 'เมืองอุตรดิตถ์');
INSERT INTO `amphur` VALUES ('16609', '1660904', 'ทองแสนขัน');
INSERT INTO `amphur` VALUES ('16609', '1660903', 'ทองแสนขัน');
INSERT INTO `amphur` VALUES ('16609', '1660902', 'ทองแสนขัน');
INSERT INTO `amphur` VALUES ('16609', '1660901', 'ทองแสนขัน');
INSERT INTO `amphur` VALUES ('16608', '1660804', 'บ้านโคก');
INSERT INTO `amphur` VALUES ('16608', '1660803', 'บ้านโคก');
INSERT INTO `amphur` VALUES ('16608', '1660802', 'บ้านโคก');
INSERT INTO `amphur` VALUES ('16608', '1660801', 'บ้านโคก');
INSERT INTO `amphur` VALUES ('16607', '1660705', 'ตรอน');
INSERT INTO `amphur` VALUES ('16607', '1660704', 'ตรอน');
INSERT INTO `amphur` VALUES ('16607', '1660703', 'ตรอน');
INSERT INTO `amphur` VALUES ('16607', '1660702', 'ตรอน');
INSERT INTO `amphur` VALUES ('16607', '1660701', 'ตรอน');

CREATE TABLE `province` (
  `id_province` varchar(3) default NULL,
  `amphurID` varchar(5) NOT NULL,
  `name_province` text
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- dump ตาราง `province`
--

INSERT INTO `province` VALUES ('166', '16609', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16608', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16607', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16606', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16605', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16604', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16603', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16602', 'อุตรดิตถ์');
INSERT INTO `province` VALUES ('166', '16601', 'อุตรดิตถ์');


โครงสร้างตาราง `tumbon`
--

CREATE TABLE `tumbon` (
  `id_tumbon` varchar(7) default NULL,
  `amphurID` varchar(5) NOT NULL,
  `name_tumbon` text
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- dump ตาราง `tumbon`
--

INSERT INTO `tumbon` VALUES ('1660101', '16601', 'แสนตอ');
INSERT INTO `tumbon` VALUES ('1660102', '16601', 'วังกะพี้');
INSERT INTO `tumbon` VALUES ('1660103', '16601', 'วังดิน');
INSERT INTO `tumbon` VALUES ('1660104', '16601', 'หาดกรวด');
INSERT INTO `tumbon` VALUES ('1660105', '16601', 'หาดงิ้ว');
INSERT INTO `tumbon` VALUES ('1660106', '16601', 'ขุนฝาง');
INSERT INTO `tumbon` VALUES ('1660107', '16601', 'คุ้งตะเภา');
INSERT INTO `tumbon` VALUES ('1660108', '16601', 'งิ้วงาม');
INSERT INTO `tumbon` VALUES ('1660109', '16601', 'ถ้ำฉลอง');
INSERT INTO `tumbon` VALUES ('1660110', '16601', 'ท่าเสา');
INSERT INTO `tumbon` VALUES ('1660111', '16601', 'ท่าอิฐ');
INSERT INTO `tumbon` VALUES ('1660112', '16601', 'น้ำริด');
INSERT INTO `tumbon` VALUES ('1660113', '16601', 'บ้านเกาะ');
INSERT INTO `tumbon` VALUES ('1660114', '16601', 'บ้านด่าน');
INSERT INTO `tumbon` VALUES ('1660115', '16601', 'บ้านด่านนาขาม');
INSERT INTO `tumbon` VALUES ('1660116', '16601', 'ป่าเซ่า');
INSERT INTO `tumbon` VALUES ('1660117', '16601', 'ผาจุก');
INSERT INTO `tumbon` VALUES ('1660201', '16602', 'สองห้อง');
INSERT INTO `tumbon` VALUES ('1660202', '16602', 'สองคอน');
INSERT INTO `tumbon` VALUES ('1660203', '16602', 'บ้านเสี้ยว');
 

25 พ.ย. 2552 2 5,182
กรกฎ วิริยะ

คงต้องแก้ไขที่ query ครับ และอาจต้องแก้ไข ฐานข้อมูลด้วย โค้ดส่วนอื่นๆ ที่เกี่ยวกับ Ajax ยังสามารถใช้เหมือนเดิมได้ครับ

วิธีนี้อาจมีปัญหาครับ เหตุผลที่ต้องเลือกจังหวัดก่อนก็เพราะว่า ข้อมูลจังหวัด เป็นข้อมูลที่มีจำนวนน้อยที่สุด และไม่ซ้ำกันครับ แต่หากเลือก อำเภอขึ้นก่อน เราอาจต้องมีข้อมูลอำเภอทุกอำเภอในประเทศมาแสดง ซึ่งมีไม่ใช่น้อยเลย และอาจซ้ำกันได้ครับ เช่น ถ้าเราเลือก อำเภอเมือง เราจะไปเลือกจังหวัด อะไรมาแสดงครับ ในส่วนของตำบล คงไม่ต้องพูดถึงครับ
#1
steamlose S.K

ครับ อาจารย์ แต่กรณีของผมคือ เอาเฉพาะ จังหวัดเดียวครับ ที่ทำเพราะเพื่อให้ความสะดวกให้กับคนใช้ระบบครับ จึงต้องทำแบบนี้ เดี๋ยวผมจะแก้ดูนะครับ ขอบคุณครับ
#2
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 2M
^