Ajax Change dropdown list ร่วมกับ PHP + Mysqli [เลือกภาคและแสดงจังหวัด]

ใน workshop นี้จะเอาตัวอย่างการใช้ Ajax drop down list ร่วมกับ PHP & Database มาใช้สร้างโปรแกรมกันนะครับ อย่างเช่น พอเราเลือกภาคและจะแสดงจังหวัดของภาคที่เลือกเท่านั้น….

เริ่มสร้าง database กันเลยครับ

*ตารางภาค

CREATE TABLE `region` (
  `Reg_Id` int(11) NOT NULL auto_increment,
  `Reg_Name` varchar(50) NOT NULL,
  PRIMARY KEY  (`Reg_Id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

-- 
-- dump ตาราง `region`
-- 

INSERT INTO `region` VALUES (1, 'กลาง');
INSERT INTO `region` VALUES (2, 'ตะวันออกเฉียงเหนือ');
INSERT INTO `region` VALUES (3, 'เหนือ');
INSERT INTO `region` VALUES (4, 'ใต้');
INSERT INTO `region` VALUES (5, 'ตะวันออก');
INSERT INTO `region` VALUES (6, 'ตะวันตก');

CREATE TABLE `region` (

`Reg_Id` int(11) NOT NULL auto_increment,

`Reg_Name` varchar(50) NOT NULL,

PRIMARY KEY (`Reg_Id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

-- dump ตาราง `region`

INSERT INTO `region` VALUES (1, 'กลาง');

INSERT INTO `region` VALUES (2, 'ตะวันออกเฉียงเหนือ');

INSERT INTO `region` VALUES (3, 'เหนือ');

INSERT INTO `region` VALUES (4, 'ใต้');

INSERT INTO `region` VALUES (5, 'ตะวันออก');

INSERT INTO `region` VALUES (6, 'ตะวันตก');

*ตารางจังหวัด

CREATE TABLE `province` (
  `Prov_Id` int(11) NOT NULL auto_increment,
  `Prov_Name` varchar(50) NOT NULL,
  `Reg_Id` int(11) NOT NULL,
  PRIMARY KEY  (`Prov_Id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=77 ;

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

INSERT INTO `province` VALUES (1, 'กรุงเทพมหานคร', 1);
INSERT INTO `province` VALUES (2, 'สมุทรปราการ', 1);
INSERT INTO `province` VALUES (3, 'นนทบุรี', 1);
INSERT INTO `province` VALUES (4, 'ปทุมธานี', 1);
INSERT INTO `province` VALUES (5, 'พระนครศรีอยุธยา', 1);
INSERT INTO `province` VALUES (6, 'กำแพงเพชร', 1);
INSERT INTO `province` VALUES (7, 'นครนายก', 1);
INSERT INTO `province` VALUES (8, 'นครปฐม', 1);
INSERT INTO `province` VALUES (9, 'นครสวรรค์', 1);
INSERT INTO `province` VALUES (10, 'พิจิตร', 1);
INSERT INTO `province` VALUES (11, 'พิษณุโลก', 1);
INSERT INTO `province` VALUES (12, 'เพชรบูรณ์', 1);
INSERT INTO `province` VALUES (13, 'ลพบุรี', 1);
INSERT INTO `province` VALUES (14, 'สมุทรสงคราม', 1);
INSERT INTO `province` VALUES (15, 'สมุทรสาคร', 1);
INSERT INTO `province` VALUES (16, 'สิงห์บุรี', 1);
INSERT INTO `province` VALUES (17, 'สุโขทัย', 1);
INSERT INTO `province` VALUES (18, 'สุพรรณบุรี', 1);
INSERT INTO `province` VALUES (19, 'สระบุรี', 1);
INSERT INTO `province` VALUES (20, 'อ่างทอง', 1);
INSERT INTO `province` VALUES (21, 'อุทัยธานี', 1);
INSERT INTO `province` VALUES (22, 'กาฬสินธุ์', 2);
INSERT INTO `province` VALUES (23, 'ขอนแก่น', 2);
INSERT INTO `province` VALUES (24, 'ชัยภูมิ', 2);
INSERT INTO `province` VALUES (25, 'นครพนม', 2);
INSERT INTO `province` VALUES (26, 'นครราชสีมา', 2);
INSERT INTO `province` VALUES (27, 'บุรีรัมย์', 2);
INSERT INTO `province` VALUES (28, 'มหาสารคาม', 2);
INSERT INTO `province` VALUES (29, 'มุกดาหาร', 2);
INSERT INTO `province` VALUES (30, 'ยโสธร', 2);
INSERT INTO `province` VALUES (31, 'ร้อยเอ็ด', 2);
INSERT INTO `province` VALUES (32, 'เลย', 2);
INSERT INTO `province` VALUES (33, 'สกลนคร', 2);
INSERT INTO `province` VALUES (34, 'สุรินทร์', 2);
INSERT INTO `province` VALUES (35, 'ศรีสะเกษ', 2);
INSERT INTO `province` VALUES (36, 'หนองคาย', 2);
INSERT INTO `province` VALUES (37, 'หนองบัวลำภู', 2);
INSERT INTO `province` VALUES (38, 'อุดรธานี', 2);
INSERT INTO `province` VALUES (39, 'อุบลราชธานี', 2);
INSERT INTO `province` VALUES (40, 'อำนาจเจริญู', 2);
INSERT INTO `province` VALUES (41, 'เชียงราย', 3);
INSERT INTO `province` VALUES (42, 'เชียงใหม่', 3);
INSERT INTO `province` VALUES (43, 'น่าน', 3);
INSERT INTO `province` VALUES (44, 'พะเยา', 3);
INSERT INTO `province` VALUES (45, 'แพร่', 3);
INSERT INTO `province` VALUES (46, 'แม่ฮ่องสอน', 3);
INSERT INTO `province` VALUES (47, 'ลำปาง', 3);
INSERT INTO `province` VALUES (48, 'ลำพูน', 3);
INSERT INTO `province` VALUES (49, 'อุตรดิตถ์', 3);
INSERT INTO `province` VALUES (50, 'กระบี่', 4);
INSERT INTO `province` VALUES (51, 'ชุมพร', 4);
INSERT INTO `province` VALUES (52, 'ตรัง', 4);
INSERT INTO `province` VALUES (53, 'นครศรีธรรมราช', 4);
INSERT INTO `province` VALUES (54, 'นราธิวาส', 4);
INSERT INTO `province` VALUES (55, 'ปัตตานี', 4);
INSERT INTO `province` VALUES (56, 'พังงา', 4);
INSERT INTO `province` VALUES (57, 'พัทลุง', 4);
INSERT INTO `province` VALUES (58, 'ภูเก็ต', 4);
INSERT INTO `province` VALUES (59, 'ระนอง', 4);
INSERT INTO `province` VALUES (60, 'สตูล', 4);
INSERT INTO `province` VALUES (61, 'สงขลา', 4);
INSERT INTO `province` VALUES (62, 'สุราษฎร์ธานี', 4);
INSERT INTO `province` VALUES (63, 'ยะลา', 4);
INSERT INTO `province` VALUES (64, 'จันทบุรี', 5);
INSERT INTO `province` VALUES (65, 'ฉะเชิงเทรา', 5);
INSERT INTO `province` VALUES (66, 'ชลบุรี', 5);
INSERT INTO `province` VALUES (67, 'ตราด', 5);
INSERT INTO `province` VALUES (68, 'ปราจีนบุรี', 5);
INSERT INTO `province` VALUES (69, 'ระยอง', 5);
INSERT INTO `province` VALUES (70, 'สระแก้ว', 5);
INSERT INTO `province` VALUES (71, 'กาญจนบุรี', 6);
INSERT INTO `province` VALUES (72, 'ตาก', 6);
INSERT INTO `province` VALUES (73, 'ประจวบคีรีขันธ์', 6);
INSERT INTO `province` VALUES (74, 'เพชรบุรี', 6);
INSERT INTO `province` VALUES (75, 'ราชบุรี', 6);
INSERT INTO `province` VALUES (76, 'ชัยนาท', 1);

CREATE TABLE `province` (

`Prov_Id` int(11) NOT NULL auto_increment,

`Prov_Name` varchar(50) NOT NULL,

`Reg_Id` int(11) NOT NULL,

PRIMARY KEY (`Prov_Id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=77 ;

-- dump ตาราง `province`

INSERT INTO `province` VALUES (1, 'กรุงเทพมหานคร', 1);

INSERT INTO `province` VALUES (2, 'สมุทรปราการ', 1);

INSERT INTO `province` VALUES (3, 'นนทบุรี', 1);

INSERT INTO `province` VALUES (4, 'ปทุมธานี', 1);

INSERT INTO `province` VALUES (5, 'พระนครศรีอยุธยา', 1);

INSERT INTO `province` VALUES (6, 'กำแพงเพชร', 1);

INSERT INTO `province` VALUES (7, 'นครนายก', 1);

INSERT INTO `province` VALUES (8, 'นครปฐม', 1);

INSERT INTO `province` VALUES (9, 'นครสวรรค์', 1);

INSERT INTO `province` VALUES (10, 'พิจิตร', 1);

INSERT INTO `province` VALUES (11, 'พิษณุโลก', 1);

INSERT INTO `province` VALUES (12, 'เพชรบูรณ์', 1);

INSERT INTO `province` VALUES (13, 'ลพบุรี', 1);

INSERT INTO `province` VALUES (14, 'สมุทรสงคราม', 1);

INSERT INTO `province` VALUES (15, 'สมุทรสาคร', 1);

INSERT INTO `province` VALUES (16, 'สิงห์บุรี', 1);

INSERT INTO `province` VALUES (17, 'สุโขทัย', 1);

INSERT INTO `province` VALUES (18, 'สุพรรณบุรี', 1);

INSERT INTO `province` VALUES (19, 'สระบุรี', 1);

INSERT INTO `province` VALUES (20, 'อ่างทอง', 1);

INSERT INTO `province` VALUES (21, 'อุทัยธานี', 1);

INSERT INTO `province` VALUES (22, 'กาฬสินธุ์', 2);

INSERT INTO `province` VALUES (23, 'ขอนแก่น', 2);

INSERT INTO `province` VALUES (24, 'ชัยภูมิ', 2);

INSERT INTO `province` VALUES (25, 'นครพนม', 2);

INSERT INTO `province` VALUES (26, 'นครราชสีมา', 2);

INSERT INTO `province` VALUES (27, 'บุรีรัมย์', 2);

INSERT INTO `province` VALUES (28, 'มหาสารคาม', 2);

INSERT INTO `province` VALUES (29, 'มุกดาหาร', 2);

INSERT INTO `province` VALUES (30, 'ยโสธร', 2);

INSERT INTO `province` VALUES (31, 'ร้อยเอ็ด', 2);

INSERT INTO `province` VALUES (32, 'เลย', 2);

INSERT INTO `province` VALUES (33, 'สกลนคร', 2);

INSERT INTO `province` VALUES (34, 'สุรินทร์', 2);

INSERT INTO `province` VALUES (35, 'ศรีสะเกษ', 2);

INSERT INTO `province` VALUES (36, 'หนองคาย', 2);

INSERT INTO `province` VALUES (37, 'หนองบัวลำภู', 2);

INSERT INTO `province` VALUES (38, 'อุดรธานี', 2);

INSERT INTO `province` VALUES (39, 'อุบลราชธานี', 2);

INSERT INTO `province` VALUES (40, 'อำนาจเจริญู', 2);

INSERT INTO `province` VALUES (41, 'เชียงราย', 3);

INSERT INTO `province` VALUES (42, 'เชียงใหม่', 3);

INSERT INTO `province` VALUES (43, 'น่าน', 3);

INSERT INTO `province` VALUES (44, 'พะเยา', 3);

INSERT INTO `province` VALUES (45, 'แพร่', 3);

INSERT INTO `province` VALUES (46, 'แม่ฮ่องสอน', 3);

INSERT INTO `province` VALUES (47, 'ลำปาง', 3);

INSERT INTO `province` VALUES (48, 'ลำพูน', 3);

INSERT INTO `province` VALUES (49, 'อุตรดิตถ์', 3);

INSERT INTO `province` VALUES (50, 'กระบี่', 4);

INSERT INTO `province` VALUES (51, 'ชุมพร', 4);

INSERT INTO `province` VALUES (52, 'ตรัง', 4);

INSERT INTO `province` VALUES (53, 'นครศรีธรรมราช', 4);

INSERT INTO `province` VALUES (54, 'นราธิวาส', 4);

INSERT INTO `province` VALUES (55, 'ปัตตานี', 4);

INSERT INTO `province` VALUES (56, 'พังงา', 4);

INSERT INTO `province` VALUES (57, 'พัทลุง', 4);

INSERT INTO `province` VALUES (58, 'ภูเก็ต', 4);

INSERT INTO `province` VALUES (59, 'ระนอง', 4);

INSERT INTO `province` VALUES (60, 'สตูล', 4);

INSERT INTO `province` VALUES (61, 'สงขลา', 4);

INSERT INTO `province` VALUES (62, 'สุราษฎร์ธานี', 4);

INSERT INTO `province` VALUES (63, 'ยะลา', 4);

INSERT INTO `province` VALUES (64, 'จันทบุรี', 5);

INSERT INTO `province` VALUES (65, 'ฉะเชิงเทรา', 5);

INSERT INTO `province` VALUES (66, 'ชลบุรี', 5);

INSERT INTO `province` VALUES (67, 'ตราด', 5);

INSERT INTO `province` VALUES (68, 'ปราจีนบุรี', 5);

INSERT INTO `province` VALUES (69, 'ระยอง', 5);

INSERT INTO `province` VALUES (70, 'สระแก้ว', 5);

INSERT INTO `province` VALUES (71, 'กาญจนบุรี', 6);

INSERT INTO `province` VALUES (72, 'ตาก', 6);

INSERT INTO `province` VALUES (73, 'ประจวบคีรีขันธ์', 6);

INSERT INTO `province` VALUES (74, 'เพชรบุรี', 6);

INSERT INTO `province` VALUES (75, 'ราชบุรี', 6);

INSERT INTO `province` VALUES (76, 'ชัยนาท', 1);

*ไฟล์เชื่อมต่อ DB

<?php
$con= mysqli_connect("localhost","root","password","dbname") or die("Error: " . mysqli_error($con));
mysqli_query($con, "SET NAMES 'utf8' "); 
?>

<?php

$con= mysqli_connect("localhost","root","password","dbname") or die("Error: " . mysqli_error($con));

mysqli_query($con, "SET NAMES 'utf8' ");

*ไฟล์ทำงานร่วมกับ AJAX

<?php 
 include("connection.php");
 
	$Reg_Id =$_REQUEST["Reg_Id"];
	
 	$sql2= "SELECT * FROM  Province WHERE Reg_Id = '$Reg_Id' "; 
	
 	$result2 = mysqli_query($con, $sql2); 
	
	while($row2 = mysqli_fetch_array($result2)) { 
	
	echo"<option value='$row2[0]'>" .$row2["Prov_Name"]." </option>";
	}
 
 
 ?>

<?php

include("connection.php");

$Reg_Id =$_REQUEST["Reg_Id"];

$sql2= "SELECT * FROM Province WHERE Reg_Id = '$Reg_Id' ";

$result2 = mysqli_query($con, $sql2);

while($row2 = mysqli_fetch_array($result2)) {

echo"<option value='$row2[0]'>" .$row2["Prov_Name"]." </option>";

}

*ไฟล์ drop down ที่ต้องการ

<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"> </script>

<script>
    $(document).ready(function(){  //
    $("#region").change(function(){  //
		 
    $.ajax({
    url: "chanDropDownList.php", //ทำงานกับไฟล์นี้
    data: "Reg_Id=" + $("#region").val(),  //ส่งตัวแปร
    type: "POST",
    async:false,
    success: function(data, status) {
		$("#province").html(data);
		 
	},
	
    error: function(xhr, status, exception) { alert(status); }
	
    });
	//return flag;
    });
    });
</script>
<?php
	//1. conection: 
include("connection.php");
$sql= "SELECT * FROM  region" or die("Error:" . mysqli_error()); 
//3. execute the query. 
$result = mysqli_query($con, $sql); 
	echo"ภาค : <select id='region'>";
	while($row = mysqli_fetch_array($result)){
		echo"<option value='$row[0]'>".$row["Reg_Name"]."</option>";
	}
	echo"</select>";
	
	//จังหวัด 
	$sql= "SELECT * FROM  province WHERE Reg_id='1'" or die("Error:" . mysqli_error()); 
//3. execute the query. 

$result = mysqli_query($con, $sql); 
	echo"จังหวัด : <select id='province'>";
	while($row = mysqli_fetch_array($result)){
		echo"<option value='$row[0]>" .$row["Prov_Name"]." </option>";
	}
	echo"</select>";
	
	mysqli_close($con);
	
	
	
?>

$(document).ready(function(){ //

$("#region").change(function(){ //

$.ajax({

url: "chanDropDownList.php", //ทำงานกับไฟล์นี้

data: "Reg_Id=" + $("#region").val(), //ส่งตัวแปร

type: "POST",

async:false,

success: function(data, status) {

$("#province").html(data);

error: function(xhr, status, exception) { alert(status); }

});

//return flag;

});

</script>

<?php

//1. conection:

include("connection.php");

$sql= "SELECT * FROM region" or die("Error:" . mysqli_error());

//3. execute the query.

$result = mysqli_query($con, $sql);

echo"ภาค : <select id='region'>";

while($row = mysqli_fetch_array($result)){

echo"<option value='$row[0]'>".$row["Reg_Name"]."</option>";

}

echo"</select>";

//จังหวัด

$sql= "SELECT * FROM province WHERE Reg_id='1'" or die("Error:" . mysqli_error());

//3. execute the query.

$result = mysqli_query($con, $sql);

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

while($row = mysqli_fetch_array($result)){

echo"<option value='$row[0]>" .$row["Prov_Name"]." </option>";

}

echo"</select>";

mysqli_close($con);

***ที่สำคัญอย่างลืมโหลด jquery มาไว้ในโฟลเดอร์เว็บไซต์เราด้วยนะครับ (บรรทัดที่ 2)

*การทำงาน **อย่าลืมเอาไปพัฒนาต่อนะครับ ^_^

devbanban

Ajax Change dropdown list ร่วมกับ PHP + Mysqli [เลือกภาคและแสดงจังหวัด]

Byพิศิษฐ์ บวรเลิศสุธี

Related

Related Post

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

You missed

ระบบบริหารบุคลากร ระบบ HR + ระบบบันทึกเวลาเข้างาน

ฟรีคลิปสอนทำเว็บไซต์ PHP PDO MySQL AdminLTE3 2024

ระบบหอพัก , อพาร์ทเม้นท์ รายวัน รายเดือน ราคาเบาๆ เอาไปต่อยอดได้ 2024

แจกฟรี To-do list Ui ออกแบบจาก Bootstrap v5.3

Byพิศิษฐ์ บวรเลิศสุธี

Share this:

Related

Related Post

You missed