|
| |
listbox multi level using ajax |
ตัวอย่าง Script เกี่ยวกับการสร้าง Dependent ข้อมูลใน ListMenu/Dropdownlist โดยในตัวอย่างผมได้แสดงรายชื่อภาค เมื่อเลือกรายชื่อภาคก็จะแสดงรายชื่อจังหวัด เมื่อเลือกแต่ล่ะจังหวัดก็จะแสดงรายชื่ออำเภอ เมื่อเลือกรายชื่ออำเภอก็จะแสดงรายชื่อตำบล ครับ ซึ่งการทำงานทั้งหมด จะใช้เทคนิค Ajax เข้ามาช่วยเสริมครับ
ก่อนอื่นเลย Download Thailand Database
แตกไฟล์ออกมาแล้วทำการ import เข้าสู่ฐานข้อมูล จากตัวอย่างนี้ผมใช้ฐานข้อมูลชื่อ 'test' ใครที่ยังทำไม่เป็น ดูตัวอย่างการ import ได้ที่
จากนั้น สร้างไฟล์ php มาสามไฟล์ดังนี้
1.index.php เอาไว้แสดง listbox ที่เราต้องการใช้
2.getdata.php เอาไว้ดึงข้อมูลรายชื่อต่างจากฐานข้อมูล
3.submit.php เอาไว้ทดสอบแสดงค่าที่เราเลือกเลือกจาก listbox
ทั้งสามไฟล์ประกอบด้วยโค้ด ดังนี้
index.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>ajax listbox three level</title>
</head>
<body onload="loadList('1','1')">
<script language="JavaScript">
var HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
function doCallAjax(type,refer,display) {
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'getdata.php';
var pmeters = "type="+type+"&refer="+refer;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById(display).innerHTML = HttPRequest.responseText;
document.getElementById('loading').style.display = "none";
} else
{
document.getElementById('loading').style.display = "";
}
}
}
function loadList(idx,refer)
{
switch(idx)
{
case '2':idx2 = parseInt(idx)+1;
obj = document.getElementById('mySpan'+idx2);
obj.innerHTML = '<select name="list'+idx2+'" id="list'+idx2+'"><option value="0">choose...</option></select>';
idx2 = parseInt(idx)+2;
obj = document.getElementById('mySpan'+idx2);
obj.innerHTML = '<select name="list'+idx2+'" id="list'+idx2+'"><option value="0">choose...</option></select>';
break;
case '3':idx2 = parseInt(idx)+1;
obj = document.getElementById('mySpan'+idx2);
obj.innerHTML = '<select name="list'+idx2+'" id="list'+idx2+'"><option value="0">choose...</option></select>';
break;
}
doCallAjax(idx,refer,'mySpan'+idx);
}
</script>
<div id="loading" style="display:none;">LOADING...</div>
<form id="form1" name="form1" method="get" action="submit.php">
<span id="mySpan1">
<select name="list1" id="list1">
<option value="0">choose...</option>
</select></span>
<span id="mySpan2">
<select name="list2" id="list2">
<option value="0">choose...</option>
</select></span>
<span id="mySpan3">
<select name="list3" id="list3">
<option value="0">choose...</option>
</select></span>
<span id="mySpan4">
<select name="list4" id="list4">
<option value="0">choose...</option>
</select></span>
<input name="send" type="submit" value="send" />
</form>
</body>
</html>
getdata.php
<?
$hostname_dbconnect = "localhost";
$database_dbconnect = "test";
$username_dbconnect = "root";
$password_dbconnect = "root";
$dbconnect = mysql_connect($hostname_dbconnect, $username_dbconnect, $password_dbconnect) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_dbconnect );
mysql_query("SET NAMES utf8");
$type = $_POST['type'];
$refer = $_POST['refer'];
$referField = "";
$dataTable = "";
$optionValueField = "";
$optionTextField = "";
$listName = "list";
$nextType = "";
$displayName = "mySpan";
$actionEvent = "onchange";
$action = "";
switch($type)
{
case "0":exit();
case "1": $referField = "1";
$dataTable = "geography";
$optionValueField = "GEO_ID";
$optionTextField = "GEO_NAME";
break;
case "2":$referField = "GEO_ID";
$dataTable = "province";
$optionValueField = "PROVINCE_ID";
$optionTextField = "PROVINCE_NAME";
break;
case "3":$referField = "PROVINCE_ID";
$dataTable = "amphur";
$optionValueField = "AMPHUR_ID";
$optionTextField = "AMPHUR_NAME";
break;
case "4":$referField = "AMPHUR_ID";
$dataTable = "district";
$optionValueField = "DISTRICT_ID";
$optionTextField = "DISTRICT_NAME";
break;
default : $referField = "";
$dataTable = "geography";
$optionValueField = "GEO_ID";
$optionTextField = "GEO_NAME";
$type = "1";
break;
}
$listName .= $type;
$nextType = $type+1;
$sql = "SELECT * FROM $dataTable where $referField = $refer";
$result = mysql_query($sql);
if($type < 4)
$action = "$actionEvent=\"JavaScript:loadList('$nextType',this.value)\"";
echo "<select name=\"$listName\" id=\"$listName\" $action><option value=\"0\">choose...</option>";
while($row = mysql_fetch_array($result))
{
echo "<option value=\"$row[$optionValueField]\">$row[$optionTextField]</option>";
}
echo "</select>";
?>
submit.php
<?
foreach(${"_".$_SERVER['REQUEST_METHOD']} as $key => $val)
{
echo "\$_".$_SERVER['REQUEST_METHOD']."['$key'] = $val <br>";
}
?>
แค่นี้ล่ะครับ ทีนี้ เราก็จะได้ listbox ที่เปลี่ยนตามกันไปใช้ แล้วครับ 
| |
|
|
|
|
 |
|
|
| |
By : |
A-mac
|
| |
Article : |
บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ |
| |
Score Rating : |
 |
| |
Create Date : |
2009-12-31 |
| |
Download : |
No files |
|
|
Sponsored Links |
|
|
|
|
|
|
Load balance : Server 03
