กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery

Posted by Onmobile 13/07/2014 in 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;

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>

<?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>

<title>itOffside.com</title>

$(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>

<tr>

<td style="text-align: right; width: 200px;">หมวดหมู่</td>

<td>

<option value="">เลือกข้อมูลหมวดหมู่</option>

<?php

while ($Result = mysql_fetch_array($Query)) {

<?php echo $Result['categorie_name']; ?>

</option>

<?php

}

</select>

</td>

</tr>

<tr>

<td>

</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>";
}

<?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 นั้นเอง

ผลลัพธ์ที่ได้

กำหนดรายการ Listbox ที่ 2 จากเงื่อนไขในการเลือก Listbox ที่ 1 ด้วย Ajax กับ jQuery — รูปภาพก่อนเปลี่ยนหมวดหมู่

สำหรับบทความนี้ก็มีเพียงเท่านี้ครับหากใครมีข้อสงสัยหรือปัญหา สอบถามได้ที่ comment ด้านล่างบทความได้เลยครับ

About the Author: Onmobile

โปรแกรมเมอร์

This site uses Akismet to reduce spam. Learn how your comment data is processed.

25 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

9 years ago

คำสั่งที่ใช้ในการคืนค่ากลับมาที่ไฟล์ show คือตรงไหนคะ

Onmobile

Author

Reply to am

9 years ago

ใช้ ajax ในการรับ-ส่งข้อมูล ส่วนขั้นตอนที่รับค่าข้อมูลอยู่ในไฟล์ show.php บรรทัดที่ 27 หมายถึงเอาค่าที่ได้จากไฟล์ select_product.php มาไว้ภายใต้ tag id ของ product ซึ่งก็คือ Tag select นั้นเอง

gig

9 years ago

ถ้าต้องการเพิ่มเงื่อนไข listbok มากกว่า2ล่ะค่ะ
สมมติว่า เลือกหมวดหมู่ > เลือกสินค้า > เลือกดูdetailของสินค้าที่เลือก
จะต้องเขียนประมาณไหนค่ะ พอจะมีโค้ดตัวอย่างมั่ยค่ะ ขอบคุณล่วงหน้าค่ะ

Onmobile

Author

Reply to gig

9 years ago

1. เพิ่ม listbox ของรายละเอียดสินค้า ชื่อ detail_product
2. สร้างไฟล์ค้นหา detail_product คล้ายกับ select_product.php โดยประยุกต์ใช้ครับ
3. เขียน event ใน jquery เพิ่มครับ เช่น $(?#products?).change(function()

คร่าวๆ ครับ

gig

Reply to Onmobile

9 years ago

ได้แล้วค่ะ ขอบคุณมากๆค่ะ ^^

Shonan36

9 years ago

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

Onmobile

Author

Reply to Shonan36

9 years ago

งงกับคำถาม ถามใหม่อีกรอบครับ

fun

9 years ago

ในกรณีที่เป็นหน้าปรับปรุงข้อมูล จะเขียนคำสั่งยังไงให้ dropdown โชว์ตามที่เลือกไว้ก่อนหน้านี้คะ ในกรณีที่ใช้แบบนี้อ่ะค่ะ

sintana

9 years ago

ตารางรถ เดือน

————–
‘มกราคม’, ’02’ => ‘กุมภาพันธ์’, ’03’ => ‘มีนาคม’, ’04’ => ‘เมษายน’,
’05’ => ‘พฤษภาคม’, ’06’ => ‘มิถุนายน’, ’07’ => ‘กรกฎาคม’, ’08’ => ‘สิงหาคม’,
’09’ => ‘กันยายน ‘, ’10’ => ‘ตุลาคม’, ’11’ => ‘พฤศจิกายน’, ’12’ => ‘ธันวาคม’);
$txtMonth = isset($_POST[‘txt_month’]) && $_POST[‘txt_month’] != ” ? $_POST[‘txt_month’] : date(‘m’);
foreach($month as $i=>$mName) {
$selected = ”;
if($txtMonth == $i) $selected = ‘selected=”selected”‘;
echo ”. $mName .”.”\n”;
}
?>

******************************************************
ผมอยากให้เปิดหน้าindexมา แล้ว เดือนมกราคม รันอัตโนมัติ จะทำได้ไหมครับ (แต่ละเดือนมีของมูลที่จะแสดง ตอนนี้ต้องคลิกเลือกเดือนถึงจะแสดง) อยากให้มันแสดงอันโตมัน รบกวนหน่อยครับ

Onmobile

Author

Reply to sintana

9 years ago

อ้างอิงจากบทความใด?

bee

9 years ago

คือ นำ script sql ด้านล่างนี้ไป run ใน phpmyadmin ขั้นตอนรันยังงัย
มันต้องสร้างดาต้าในฐานข้อมูลยังงัย ติดตรงนี้

Onmobile

Author

Reply to bee

9 years ago

phpmyadmin->select database->sql

วุฒิชัย

8 years ago

มือใหม่ครับ ผมลอง copy แล้วทำตามทั้งหมดแล้ว แต่ว่าผลที่ได้ เลือก หมวดหมู่แล้ว ในช่องแสดงสินค้าไม่มีแสดงออกมาครับ ต้องแก้ตรงไหนช่วยบอกผมที ขอบคุณครับ

วุฒิชัย

Reply to วุฒิชัย

8 years ago

ผมไล่ดูโค๊ดอีกทีเจอแล้วแก้ไข ใช้ได้แล้วครับ ขอบคุณครับ

newyear

8 years ago

ถ้าต้องการแสดงรูปภาพสินค้า โดยดึงรูปภาพจากโฟลเดอร์มาแสดง
สมมติ : เลือกหมวดหมู่> เลือกสินค้า> กดปุ่ม submit แล้วแสดงรูป
โดยเก็บที่อยู่ของรูปภาพเก็บไว้ใน ml_product (`id`, `product_name`, `categories_id`, `address_pic`)
จะต้องเขียนประมาณไหนค่ะ ช่วยแนะนำหน่อยค่ะ พอจะมีโค้ดตัวอย่างมั้ยค่ะ ขอบคุณค่ะ