jQuery Selected Dropdown List with PHP & MySQL

By -

นานแล้วที่ไม่ได้เขียนบทความเลย เหตุเพราะที่ทำงานกะลังวุ่นหนัก ออกต่างจังหวัดเป็นว่าเล่น แต่ก็เอาเถอะ..วันนี้มีน้องสาวคนนึงส่ง plugins ที่เป็น dropdownlist มาให้ผมช่วยดูให้ แต่ว่า plugins ตัวนั้นดูเหมือนจะใช้งานยากไปนิด ผมก็เลย ลองเขียนให้ น้องเขาดูอาจจะไม่สมบูรณ์นักแต่ก็หวังว่าคงจะเป็นประโยชน์กันบ้างเลยเอามาแชร์ให้ดูครับ

ยกตัวอย่าง เช่น จังหวัด อำเภอ ตำบลนะครับ  ในจังหวัด หนึ่งๆ จะมีหลายอำเภอ และในอำเภอ หนึ่งๆ ก็จะมีหลายตำบล เวลาผมเลือกจังหวัด อำเภอภายในจังหวัดนั้นก็จะแสดง และเวลาผมเลือกอำเภอ ตำบลภายในอำเภอนั้นก็จะแสดงเช่นกัน  เป็นต้น

แต่ผมผมขี้เกียจสร้างตารางอำเภอ กับตำบล เพราะข้อมูลมันเยอะมาก ขอจำลองเป็น ประเภท  ประเภทย่อย แล้วก็ขอ้มูลแทนนะครับ ฐานข้อมูล ชื่อว่า demo ตารางมี 3 ตาราง คือ type subType แล้วก็ data

script SQL

-- ----------------------------
-- Table structure for `data`
-- ----------------------------
DROP TABLE IF EXISTS `data`;
CREATE TABLE `data` (
  `dataId` int(4) NOT NULL AUTO_INCREMENT,
  `dataName` varchar(15) DEFAULT NULL,
  `subTypeId` int(4) DEFAULT NULL,
  PRIMARY KEY (`dataId`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of data
-- ----------------------------
INSERT INTO `data` VALUES ('1', 'dragonball', '1');
INSERT INTO `data` VALUES ('2', 'สำรวจโลก', '2');
INSERT INTO `data` VALUES ('3', 'ผีดุ', '3');
INSERT INTO `data` VALUES ('4', 'iron  man', '4');
INSERT INTO `data` VALUES ('5', 'ปลาดิบ', '5');
INSERT INTO `data` VALUES ('6', 'มาม่า', '6');
INSERT INTO `data` VALUES ('7', 'ปลากระป๋อง', '7');
INSERT INTO `data` VALUES ('8', 'naruto', '1');

-- ----------------------------
-- Table structure for `subtype`
-- ----------------------------
DROP TABLE IF EXISTS `subtype`;
CREATE TABLE `subtype` (
  `subTypeId` int(4) NOT NULL AUTO_INCREMENT,
  `subTypeName` varchar(15) DEFAULT NULL,
  `typeId` int(4) DEFAULT NULL,
  PRIMARY KEY (`subTypeId`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of subtype
-- ----------------------------
INSERT INTO `subtype` VALUES ('1', 'หนังสือการ์ตูน', '1');
INSERT INTO `subtype` VALUES ('2', 'สารคดี', '1');
INSERT INTO `subtype` VALUES ('3', 'สยองขวัญ', '2');
INSERT INTO `subtype` VALUES ('4', 'action', '2');
INSERT INTO `subtype` VALUES ('5', 'อาหารสด', '3');
INSERT INTO `subtype` VALUES ('6', 'อาหารแห้ง', '3');
INSERT INTO `subtype` VALUES ('7', 'อาหารกระป๋อง', '3');

-- ----------------------------
-- Table structure for `type`
-- ----------------------------
DROP TABLE IF EXISTS `type`;
CREATE TABLE `type` (
  `typeId` int(4) NOT NULL AUTO_INCREMENT,
  `name` varchar(15) DEFAULT NULL,
  PRIMARY KEY (`typeId`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of type
-- ----------------------------
INSERT INTO `type` VALUES ('1', 'หนังสือ');
INSERT INTO `type` VALUES ('2', 'ภาพยนต์');
INSERT INTO `type` VALUES ('3', 'อาหาร');

จากนั้นสร้างไฟล์
dropDownList.php
เขียนโค้ด

<?php require_once('Connections/connect.php'); ?>
<!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" />
<title>TDIV DEMO</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.min.js"></script>
<script language="JavaScript" type="text/javascript">
function list(tagNext, val, txtCon) {  
    $.getJSON('combobox.php', {name:txtCon,value:val}, function(data) {
        var select = $(tagNext);
        var options = select.attr('options');
        $('option', select).remove();
		   $(select).append('<option value=""> - เลือก - </option>');
        $.each(data, function(index, array) {
			    $(select).css("display","inline");
				 $(select).append('<option value="' + array[0] + '">' + array[1] + '</option>');
        });
    });
}

</script>
</head>
<body>
<h1>DropDownList</h1>
<form name="formname" method="post" action="">
      <!-- country combobox -->
    <select id="type" name="type" onchange="list('#subType',this.value,'type')">
    <?php
		mysql_select_db($database_connect, $connect);
		$query_q = "SELECT * FROM type";
		$q = mysql_query($query_q, $connect) or die(mysql_error());
		while($row_q = mysql_fetch_array($q)){
		  $id = $row_q["typeId"];
		  $name = $row_q["name"];
	     echo"<option value='$id' selected>$name</option>";
		};
    ?>      
    </select>
      <!-- state combobox is chained by country combobox-->
    <select name="subType" id="subType" style="display:none" onchange="list('#data', this.value, 'subType')"></select>
      <!-- city combobox is chained by state combobox-->
    <select name="data" id="data" style="display:none"></select>
</form>
</body>
</html>

ผมขออธิบายฟังชั่น list(tagNext, val, txtCon) นิดนึง
tagNext : id ของ combobox ตัวถัดไปนะครับ
val : ค่าตอนของตอนที่เราเรียก เพื่อที่จะส่งไปอีกหน้าหนึง
texCon : เผื่อสำหรับมีเงื่อนไขอะไรที่ต้องส่งไป ผมขี้เกียจเขียนหลายๆหน้าเลยจำเป็นต้องมีเงื่อนไขส่งไปด้วย

ต่อไปก็สร้างไฟล์ combobox.php
เขียนโค้ด

 <?php require_once('Connections/connect.php'); ?>
<?php
$aD = array();
$id = $_GET['value'];
$nameType = $_GET['name'];
if($nameType == 'type') {
	if($id!=""){
		mysql_select_db($database_connect, $connect);
		$query_subType = "SELECT * FROM subtype WHERE typeId=$id";
		$subType = mysql_query($query_subType, $connect) or die(mysql_error());		
		$totalRows_subType = mysql_num_rows($subType);
		if($totalRows_subType>0){
			while($row_subType = mysql_fetch_array($subType)){
				$aD[] = array($row_subType["subTypeId"],$row_subType["subTypeName"]);
			}
		}
	}	
}
if($nameType == "subType"){
   if($id){
	   mysql_select_db($database_connect, $connect);
		$query_data = "SELECT * FROM `data` WHERE subTypeId=$id";
		$data = mysql_query($query_data, $connect) or die(mysql_error());
		$totalRows_data = mysql_num_rows($data);	
		if($totalRows_data>0){
			while($row_data = mysql_fetch_array($data)){
				$aD[] = array($row_data["dataId"],$row_data["dataName"]);
			}
		}
	}
	
}

echo json_encode($aD);

?>

การทำงาน ก็ง่ายๆ
$id = $_GET[‘value’];
$nameType = $_GET[‘name’];
$id = id ที่ถูกส่งมา เพื่อเอาไปเป็นเงื่อนไขในการ select ฐานข้อมูลถัดไป
$nameType = เงือนไขที่เรากำหนด ตัวนี้จะตั้งอะไรก็ได้นะครับ เช่นผมตั้งว่า type เพื่อให้รู้ว่า ตอนนี้สถานะเขาเลือกที่ตาราง type ให้ select หา sub ย่อยที่อยู่ในตาราง type ออกมาเท่านั้นเอง
view
jquery dropdown list php mysql,Drop Down List Using jQuery jquery dropdown list php mysql,Drop Down List Using jQuery

download

mitsumasa