 |
|
อ้างอิงจาก Dependent DropDownList/ListMenu จังหวัด อำเภอ ตำบล USING JSON หัวข้อนี้ของท่าน Nautilus
คือถ้าผมกดปุ่ม submit แล้วให้โชว์ข้อมูลจาก Database ผมทำได้แล้ว แต่ผมอยากจะให้ ListMenu ตรงส่วนของ อำเภอ มีค่าเป็น selected หมายถึงถ้าผมกดปุ่ม submit แล้วให้ ListMenu ใช้โชว์ชื่ออำเภอที่ผมเลือกอ่ะครับ ผมควรจะแก้ไขโค๊ดตรงส่วน javascript ยังไงดีครับพอดีผม พึ่งกำลังศึกษา javascript อ่ะครับเลยยังไม่่ค่อยรู้เรื่องเท่าไหร่ แล้วงานก็ต้องส่งแล้วด้วยติดตรงนี้ตรงเดียวเลย รบกวนชี้แนะด้วยครับ
index.php
<?php
// Load jQuery library from google.
$jqLib = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js';
// Create connection connect to mysql database
$dbCon = mysql_connect('localhost', 'root', '1234') or die (mysql_error());
// Select database.
mysql_select_db('thailand', $dbCon) or die (mysql_error());
// Set encoding.
mysql_query('SET NAMES UTF8');
?>
<!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>Dependent dropdownlist จังหวัด อำเภอ ตำบล</title>
<script type="text/javascript" src="<?php echo $jqLib; ?>"></script>
<script type="text/javascript">
// Specify a function to execute when the DOM is fully loaded.
$(function(){
var defaultOption = '<option value=""> ------- เลือก ------ </option>';
var loadingImage = '<img src="images/loading4.gif" alt="loading" />';
// Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$('#selProvince').change(function() {
$("#selAmphur").html(defaultOption);
$("#selTumbon").html(defaultOption);
// Perform an asynchronous HTTP (Ajax) request.
$.ajax({
// A string containing the URL to which the request is sent.
url: "jsonAction.php",
// Data to be sent to the server.
data: ({ nextList : 'amphur', provinceID: $('#selProvince').val() }),
// The type of data that you're expecting back from the server.
dataType: "json",
// beforeSend is called before the request is sent
beforeSend: function() {
$("#waitAmphur").html(loadingImage);
},
// success is called if the request succeeds.
success: function(json){
$("#waitAmphur").html("");
// Iterate over a jQuery object, executing a function for each matched element.
$.each(json, function(index, value) {
// Insert content, specified by the parameter, to the end of each element
// in the set of matched elements.
$("#selAmphur").append('<option value="' + value.AMPHUR_ID +
'">' + value.AMPHUR_NAME + '</option>');
});
}
});
});
$('#selAmphur').change(function() {
$("#selTumbon").html(defaultOption);
$.ajax({
url: "jsonAction.php",
data: ({ nextList : 'tumbon', amphurID: $('#selAmphur').val() }),
dataType: "json",
beforeSend: function() {
$("#waitTumbon").html(loadingImage);
},
success: function(json){
$("#waitTumbon").html("");
$.each(json, function(index, value) {
$("#selTumbon").append('<option value="' + value.DISTRICT_ID +
'">' + value.DISTRICT_NAME + '</option>');
});
}
});
});
});
</script>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
}
</style>
</head>
<body>
<label>จังหวัด : </label>
<select id="selProvince">
<option value=""> ------- เลือก ------ </option>
<?php
$result = mysql_query("
SELECT
PROVINCE_ID,
PROVINCE_NAME
FROM
province
ORDER BY CONVERT(PROVINCE_NAME USING TIS620) ASC;
");
while($row = mysql_fetch_assoc($result)){
echo '<option value="', $row['PROVINCE_ID'], '">', $row['PROVINCE_NAME'],'</option>';
}
?>
</select>
<label>อำเภอ : </label>
<select id="selAmphur">
<option value=""> ------- เลือก ------ </option>
</select><span id="waitAmphur"></span>
<label>ตำบล : </label>
<select id="selTumbon">
<option value=""> ------- เลือก ------ </option>
</select><span id="waitTumbon"></span>
</body>
</html>
jsonAction.php
<?php
// Set delay 1 second.
sleep(1);
// Create connection connect to mysql database
$dbCon = mysql_connect('localhost', 'root', '1234') or die (mysql_error());
// Select database.
mysql_select_db('thailand', $dbCon) or die (mysql_error());
// Set encoding.
mysql_query('SET NAMES UTF8');
// Next dropdown list.
$nextList = isset($_GET['nextList']) ? $_GET['nextList'] : '';
switch($nextList) {
case 'amphur':
$provinceID = isset($_GET['provinceID']) ? $_GET['provinceID'] : '';
$result = mysql_query("
SELECT
AMPHUR_ID,
AMPHUR_NAME
FROM
amphur
WHERE PROVINCE_ID = '{$provinceID}'
ORDER BY CONVERT(AMPHUR_NAME USING TIS620) ASC;
");
break;
case 'tumbon':
$amphurID = isset($_GET['amphurID']) ? $_GET['amphurID'] : '';
$result = mysql_query("
SELECT
DISTRICT_ID,
DISTRICT_NAME
FROM
district
WHERE AMPHUR_ID = '{$amphurID}'
ORDER BY CONVERT(DISTRICT_NAME USING TIS620) ASC;
");
break;
}
$data = array();
while($row = mysql_fetch_assoc($result)) {
$data[] = $row;
}
// Print the JSON representation of a value
echo json_encode($data);
?>
Tag : PHP, JavaScript, jQuery
|
ประวัติการแก้ไข
2011-05-04 11:23:57
|
 |
 |
 |
 |
| Date :
2011-05-04 11:09:18 |
By :
wHitehAcker |
View :
1772 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
