itOffside
กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery
Ajax
การกำหนดรายการ Listbox ที่ 2 โดยเงื้อนไขจากการเลือก Listbox ที่ 1 หรือ Dropdown สามารถนำไปประยุกต์ใช้งานได้อย่างหลากหลายเช่น การทำ Listbox (Dropdown) จังหวัด - อำเภอ โดยเมื่อมีการเลือก Listbox (Dropdown) จังหวัด แล้ว Listbox (Dropdown) อำเภอ จะแสดงรายการอำเภอเฉพาะจังหวัดที่เลือกเท่านั้น โดยบทความนี้จะใช้ PHP, Javascript (jQuery) โดยใช้เทคโนโลยีของ Ajax เป็นตัวอย่าง และใช้ฐานข้อมูล MySQL
update บทความที่เกี่ยวข้องและปรับปรุงใหม่
ตอนนี้มีบทความ การทำ listbox/dropdown แบบ 3 ชั้นแล้ว ละเอียดกว่าเดิม คลิกเพื่อดู
เพื่อให้เห็นภาพลองดูตัวอย่าง ได้ที่นี้ Demo
1. นำ script sql ด้านล่างนี้ไป run ใน phpmyadmin
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
CREATE TABLE IF NOT EXISTS `ml_categories` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'รหัส',
`categorie_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL COMMENT 'ชื่อกลุ่ม',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=4 ;
--
-- Dumping data for table `ml_categories`
--
INSERT INTO `ml_categories` (`id`, `categorie_name`) VALUES
(1, 'เครื่องใช้ไฟฟ้า'),
(2, 'กีฬา'),
(3, 'อสังหาริมทรัพย์');
-- --------------------------------------------------------
--
-- Table structure for table `ml_products`
--
CREATE TABLE IF NOT EXISTS `ml_products` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`product_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`categories_id` int(11) NOT NULL,
PRIMARY KEY (`id`),
KEY `categories_id` (`categories_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;
--
-- Dumping data for table `ml_products`
--
INSERT INTO `ml_products` (`id`, `product_name`, `categories_id`) VALUES
(1, 'โทรทัศน์', 1),
(2, 'โปรเจ็กเตอร์', 1),
(3, 'เครื่องเล่นและบันทึก DVD', 1),
(4, 'เครื่องเสียง', 1),
(5, 'อุปกรณ์ซักผ้า', 1),
(6, 'กอลฟ์', 2),
(7, 'เทนนิส', 2),
(8, 'บาสเก็ตบอล', 2),
(9, 'วิ่ง', 2),
(10, 'เบสบอล & ซอฟท์บอล', 2),
(11, 'แบดมินตัน', 2),
(12, 'บ้าน', 3),
(13, 'ทาวน์เฮ้าส์', 3),
(14, 'คอนโดมีเนี่ยม', 3),
(15, 'ตึกแถว', 3);
--
-- Constraints for dumped tables
--
--
-- Constraints for table `ml_products`
--
ALTER TABLE `ml_products`
ADD CONSTRAINT `ml_products_ibfk_1` FOREIGN KEY (`categories_id`) REFERENCES `ml_categories` (`id`) ON DELETE CASCADE ON UPDATE CASCADE;
ในฐานข้อมูลนี้มี 2 ตารางคือ ตารางหมวดหมู่(ml_categories) และตารางสินค้า(ml_products)
2. หลักจากที่ Run script ในการสร้างตาราง categorie และ product มาแล้วต่อไปจะเป็นการเขียนไฟล์ show.php กันครับ ดู Code ด้านล่างได้เลยครับ
<?php
/*
* connection database
*/
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('sysapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');
/*
* select data
*/
$Query = mysql_query('SELECT * FROM ml_categories') or die('Error query #12');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>itOffside.com</title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#categories').change(function() {
$.ajax({
type: 'POST',
data: {categories: $(this).val()},
url: 'select_product.php',
success: function(data) {
$('#products').html(data);
}
});
return false;
});
});
</script>
</head>
<body style="width: 100%;padding-top: 50px;">
<form name="multilistbox" method="POST">
<table border="0" width="500" cellpadding="5" style="margin: 0 auto;">
<tr>
<td style="text-align: right; width: 200px;">หมวดหมู่</td>
<td>
<select name="categories" id="categories">
<option value="">เลือกข้อมูลหมวดหมู่</option>
<?php
while ($Result = mysql_fetch_array($Query)) {
?>
<option value="<?php echo $Result['id']; ?>">
<?php echo $Result['categorie_name']; ?>
</option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td style="text-align: right;">สินค้า</td>
<td>
<select name="products" id="products"></select>
</td>
</tr>
</table>
</form>
</body>
</html>เพิ่มเติมไฟล์ jquery สามารถ ดาวน์โหลดได้ที่นี้ jquery
จาก code ด้านบนผมอธิบายไล่ตามบรรทัดดังนี้ครับ
บรรทัดที่ 5-7 : เป็นใช้ฟังก์ชั่นการเชื่อมต่อฐานข้อมูล MySQL พร้อมกำหนดอักขระ UTF8
บรรทัดที่ 12 : ฟังก์ชั่น Query? SELECT ข้อมูลหมวดหมู่สินค้าหรือตาราง categories นั้นเอง
บรรทัดที่ 19 : include ไฟล์ jquery เวอร์ชั่น 1.11.1
บรรทัดที่ 20-34 : เป็นการเขียน jquery เพื่อร้องขอ(Request)ข้อมูล SERVER ผ่าน AJAX โดยถ้ามีการเกิดเหตุการณ์(event) ของการเปลี่ยนแปลง Listbox หรือ Dropdown ของหมวดหมู่จะทำให้มีการส่งข้อมูล categorie_id แบบ POST? ไปยังไฟล์ select_product.php ซึ่งไฟล์ select_product.php นี้เองที่ทำหน้าในการ Select ข้อมูลสินค้า (products) ตามหมวดหมู่ แล้วตอบกลับ(Response)โดยการส่งข้อมูลที่ได้จากการ Select กลับไปยังไฟล์ show.php
บรรทัดที่ 37-63 : เป็นฟอร์ม Listbox หรือ Dropdown
สรุป ส่วนสำคัญของไฟล์นี้คือการ include ไฟล์ jquery การใช้งาน jquery ajax ให้ติดต่อไปยัง SERVER และ การอ้างอิง Element ID ให้เชื่อมโยงกัน
3. เขียนไฟล์ select_product.php ในการ Select ข้อมูลสินค้าตามการเลือก Listbox หรือ Dropdown
<?php
/*
* connection database
*/
$Connect = mysql_connect('localhost', 'root', '') or die('Error connecting to MySQL');
mysql_select_db('sysapp', $Connect) or die('Database sysapp does not exist!');
mysql_query('SET NAMES UTF8');
/*
* check POST
*/
$categorie_id = isset($_POST['categories']) ? $_POST['categories'] : "";
$Query = mysql_query("SELECT * FROM ml_products WHERE categories_id='{$categorie_id}'");
$Rows = mysql_num_rows($Query);
if ($Rows > 0) {
while ($Result = mysql_fetch_array($Query)) {
echo "<option value=\"" . $Result['id'] . "\">" . $Result['product_name'] . "</option>";
}
}else{
echo "<option value=\"\">ไม่มีสินค้าในหมวดหมู่ที่เลือก</option>";
}อธิบาย Code ของไฟล์ select_product.php
บรรทัดที่ 12 : เช็คค่าตัวแปร $_POST['categories'] ซึ่งตัวแปรที่ส่งมาจากไฟล์ show.php นั้นเองโดยตัวแปรเป็น TYPE POST โดยเก็บค่าไว้ในตัวแปร $categorie_id
สรุป มีการ Select ข้อมูลจากตาราง ml_product โดยใช้เงื้อนไข categories_id='$categorie_id' หมายถึงดึงเฉพาะข้อมูลตามหมวดหมู่ที่เลือกในหน้า show.php นั้นเอง
ผลลัพธ์ที่ได้
สำหรับบทความนี้ก็มีเพียงเท่านี้ครับหากใครมีข้อสงสัยหรือปัญหา สอบถามได้ที่ comment ด้านล่างบทความได้เลยครับ
แชร์บทความนี้
โปรแกรมเมอร์
ความเห็น (25)