สอบถาม การทำ Double list + ajax คิดว่า คงมีคนมาถามที่ thaicrate แล้ว เกี่ยวกับทำ Doublelist + ajax เกี่ยวกับ
ไม่รู้สิครับว่าอยู่ตรงไหน jquery multilevel combobox
ถ้าไม่นับโค้ดการตรวจสอบข้อมูล โค้ด ajax ตัวนี้ก็ไม่ยาวนะครับ
ผมพยายามตรวจสอบให้ได้ทั้งสองระดับทั้งระดับอำเภอและระดับตำบลน่ะครับ
เพราะว่าบางครั้งระดับล่างสุดก็ไปสุดที่ระดับอำเภอ ไม่มีสักกะตำบล ก็เลยอ่านแล้วงงหน่อยครับ
Date :
2009-08-15 13:48:49
By :
num
Code (PHP)
<?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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Thaicreate.com </title>
<?php
/*** By Weerachai Nukitram ***/
/*** http://www.ThaiCreate.Com ***/
$objConnect = mysql_connect("localhost","root","") or die("Error Connect to Database");
$objDB = mysql_select_db("geo");
@mysql_query("SET NAMES UTF8");
?>
<script language = "JavaScript">
//**** List Province (Start) ***//
function ListProvince(SelectValue)
{
frmMain.ddlProvince.length = 0
frmMain.ddlAmphur.length = 0
frmMain.ddldistrict.length = 0
//*** Insert null Default Value ***//
var myOption = new Option('','')
frmMain.ddlProvince.options[frmMain.ddlProvince.length]= myOption
<?
$intRows = 0;
$strSQL = "SELECT * FROM province ORDER BY PROVINCE_ID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$intRows = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$intRows++;
?>
x = <?=$intRows;?>;
mySubList = new Array();
strGroup = <?=$objResult["GEO_ID"];?>;
strValue = "<?=$objResult["PROVINCE_ID"];?>";
strItem = "<?=$objResult["PROVINCE_NAME"];?>";
mySubList[x,0] = strItem;
mySubList[x,1] = strGroup;
mySubList[x,2] = strValue;
if (mySubList[x,1] == SelectValue){
var myOption = new Option(mySubList[x,0], mySubList[x,2])
frmMain.ddlProvince.options[frmMain.ddlProvince.length]= myOption
}
<?
}
?>
}
//**** List Province (End) ***//
//**** List Amphur (Start) ***//
function ListAmphur(SelectValue)
{
frmMain.ddlAmphur.length = 0
//*** Insert null Default Value ***//
var myOption = new Option('','')
frmMain.ddlAmphur.options[frmMain.ddlAmphur.length]= myOption
<?
$intRows = 0;
$strSQL = "SELECT * FROM amphur ORDER BY AMPHUR_ID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$intRows = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$intRows++;
?>
x = <?=$intRows;?>;
mySubList = new Array();
strGroup = <?=$objResult["PROVINCE_ID"];?>;
strValue = "<?=$objResult["AMPHUR_ID"];?>";
strItem = "<?=$objResult["AMPHUR_NAME"];?>";
mySubList[x,0] = strItem;
mySubList[x,1] = strGroup;
mySubList[x,2] = strValue;
if (mySubList[x,1] == SelectValue){
var myOption = new Option(mySubList[x,0], mySubList[x,2])
frmMain.ddlAmphur.options[frmMain.ddlAmphur.length]= myOption
}
<?
}
?>
}
//**** List Amphur (End) ***//
//**** List district (Start) ***//
function Listdistrict(SelectValue)
{
frmMain.ddldistrict.length = 0
//*** Insert null Default Value ***//
var myOption = new Option('','')
frmMain.ddldistrict.options[frmMain.ddldistrict.length]= myOption
<?
$intRows = 0;
$strSQL = "SELECT * FROM district ORDER BY DISTRICT_ID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$intRows = 0;
while($objResult = mysql_fetch_array($objQuery))
{
$intRows++;
?>
x = <?=$intRows;?>;
mySubList = new Array();
strGroup = <?=$objResult["AMPHUR_ID"];?>;
strValue = "<?=$objResult["DISTRICT_ID"];?>";
strItem = "<?=$objResult["DISTRICT_NAME"];?>";
mySubList[x,0] = strItem;
mySubList[x,1] = strGroup;
mySubList[x,2] = strValue;
if (mySubList[x,1] == SelectValue){
var myOption = new Option(mySubList[x,0], mySubList[x,2])
frmMain.ddldistrict.options[frmMain.ddldistrict.length]= myOption
}
<?
}
?>
}
//**** List district (End) ***//
</script>
</head>
<form name="frmMain" action="" method="post">
ภาค :
<select id="ddlGeo" name="ddlGeo" onChange = "ListProvince(this.value)">
<option select value="0">-- เลือกภาค --</option>
<?
$strSQL = "SELECT * FROM geography ORDER BY GEO_ID ASC ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
while($objResult = mysql_fetch_array($objQuery))
{
?>
<option value="<?=$objResult["GEO_ID"];?>"><?=$objResult["GEO_NAME"];?></option>
<?
}
?>
</select>
จังหวัด :
<select id="ddlProvince" name="ddlProvince" style="width:120px" onChange = "ListAmphur(this.value)">
<option value="0">-- เลือกจังหวัด --</option>
</select>
อำเภอ :
<select id="ddlAmphur" name="ddlAmphur" style="width:200px" onchange = "Listdistrict(this.value)">
<option value="0">-- เลือกอำเภอ --</option>
</select>
ตำบล :
<select id="ddldistrict" name="ddldistrict" style="width:200px">
<option value="0">-- เลือกตำบล --</option>
</select>
</form>
</body>
</html>
<?
mysql_close($objConnect);
?>
?>
ผมก็เอาจากเว็ปนี้ไปเหมือนกันครับ รวมทั้งฐานข้อมูลด้วย แต่ของผมไม่ค่อยเนียนเท่าไหร่หน่ะครับ ลองดู ๆ
Date :
2009-08-15 15:54:35
By :
chaiwit
ของผมทำเป็น ajax โดย ดึงข้อมูล จาก php แต่ ไม่สามารถ นำค่า ไปใส่ใน option ของ select ได้
โดยข้อมูลที่ส่งมาจาก php เชียงของ:01|เมือง:02|แม่สาย:03|.....n:mm
//==============ajax==================================
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function sel_district(){
createXMLHttpRequest();
var id_province = document.getElementById("province").value;
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","../function/function.php?mode=district&proid="+id_province,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
re=xmlHttp.responseText;
var array_re=re.split("|");
document.getElementById("dis_num").value=array_re.length;
var lb = document.getElementById('mylist');
var array_re2;
for(i=0; i<(array_re.length-1); i++) {
var y=document.createElement('option');
array_re2=array_re[i].split(":");
y.text=array_re2[1];
y.value=array_re2[0];
}
lb.add(y);
}
}
}
ผลที่ได้ คือ จะมีรายการ อำเภอแรก ที่ถูก เก็บไว้ใน List ของ ListBox ของ District เลยไม่รู้ว่า จะใช้คำสั่งของ javascript ที่จะนำ ข้อมูลไปใส่ใน option นะครับ เซียน ajax ช่วยหน่อย ไม่รู้ว่า ผิด ตรงใหน
============ผลลัพธ์===========================
Date :
2009-08-16 10:28:33
By :
nilas
Load balance : Server 01