001.
<?php
002.
004.
005.
006.
$dbCon
= mysql_connect(
'localhost'
,
'root'
,
''
)
or
die
(mysql_error());
007.
008.
009.
mysql_select_db(
'Firelederhome'
,
$dbCon
)
or
die
(mysql_error());
010.
011.
012.
mysql_query(
'SET NAMES UTF8'
);
013.
014.
?>
015.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
018.
<head>
019.
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
020.
<title>Dependent dropdownlist จังหวัด อำเภอ ตำบล</title>
021.
<script type=
"text/javascript"
src=
"<?php echo $jqLib; ?>"
></script>
022.
<script type=
"text/javascript"
>
023.
024.
$(
function
(){
025.
var
defaultOption =
'<option value=""> ------- เลือก ------ </option>'
;
026.
var
loadingImage =
'<img src="images/loading4.gif" alt="loading" />'
;
027.
028.
$(
'#selProvince'
).change(
function
() {
029.
$(
"#selAmphur"
).html(defaultOption);
030.
$(
"#selTumbon"
).html(defaultOption);
031.
032.
$.ajax({
033.
034.
url:
"jsonAction.php"
,
035.
036.
data: ({ nextList :
'amphur'
, provinceID: $(
'#selProvince'
).val() }),
037.
038.
dataType:
"json"
,
039.
040.
beforeSend:
function
() {
041.
$(
"#waitAmphur"
).html(loadingImage);
042.
},
043.
044.
success:
function
(json){
045.
var
str =
""
;
046.
$(
"#provinceId"
).html($(
'#selProvince'
).val() +
" ->> "
);
047.
$(
"#selProvince option:selected"
).each(
function
() {
048.
str = $(this).text();
049.
});
050.
$(
"#provinceName"
).text(str);
051.
$(
"#provinceHidden"
).val(str);
052.
$(
"#waitAmphur"
).html(
""
);
053.
054.
$.each(json,
function
(index, value) {
055.
056.
057.
$(
"#selAmphur"
).append(
'<option value="'
+ value.AMPHUR_ID +
058.
'">'
+ value.AMPHUR_NAME +
'</option>'
);
059.
});
060.
}
061.
});
062.
});
063.
064.
065.
066.
067.
$(
'#selAmphur'
).change(
function
() {
068.
$(
"#selTumbon"
).html(defaultOption);
069.
$.ajax({
070.
url:
"jsonAction.php"
,
071.
data: ({ nextList :
'tumbon'
, amphurID: $(
'#selAmphur'
).val() }),
072.
dataType:
"json"
,
073.
async: true,
074.
beforeSend:
function
() {
075.
$(
"#waitTumbon"
).html(loadingImage);
076.
},
077.
success:
function
(json){
078.
var
str =
""
;
079.
$(
"#amphurId"
).html($(
'#selAmphur'
).val() +
" ->> "
);
080.
$(
"#selAmphur option:selected"
).each(
function
() {
081.
str = $(this).text();
082.
});
083.
$(
"#amphurName"
).text(str);
084.
$(
"#amphurHidden"
).val(str);
085.
$(
"#waitTumbon"
).html(
""
);
086.
$.each(json,
function
(index, value) {
087.
$(
"#selTumbon"
).append(
'<option value="'
+ value.DISTRICT_ID +
088.
'">'
+ value.DISTRICT_NAME +
'</option>'
);
089.
});
090.
}
091.
});
092.
093.
$.ajax({
094.
url:
"jsonAction2.php"
,
095.
data: ({ amphurID: $(
'#selAmphur'
).val() }),
096.
dataType :
"json"
,
097.
async: true,
098.
success:
function
(json){
099.
$(
"#zipcodeId"
).html(json);
100.
}
101.
});
102.
});
103.
104.
$(
'#selTumbon'
).change(
function
() {
105.
var
str =
""
;
106.
$(
"#tumbonId"
).html($(
'#selTumbon'
).val() +
" ->> "
);
107.
$(
"#selTumbon option:selected"
).each(
function
() {
108.
str = $(this).text();
109.
});
110.
console.debug(str);
111.
$(
"#tumbonName"
).text(str);
112.
$(
"#tumbonHidden"
).val(str);
113.
});
114.
115.
116.
});
117.
</script>
118.
<style type=
"text/css"
>
119.
body {
120.
font-family: Verdana, Geneva, sans-serif;
121.
font-size: 13px;
122.
}
123.
</style>
124.
</head>
125.
126.
<body>
127.
<form name=
"thailand"
id=
"thailand"
method=
"post"
>
128.
<label>จังหวัด : </label>
129.
<select id=
"selProvince"
name=
"selProvince"
>
130.
<option value=
""
> ------- เลือก ------ </option>
131.
<?php
132.
$result
= mysql_query("
133.
SELECT
134.
PROVINCE_ID,
135.
PROVINCE_NAME
136.
FROM
137.
province
138.
ORDER BY CONVERT(PROVINCE_NAME USING TIS620) ASC;
139.
");
140.
141.
while
(
$row
= mysql_fetch_assoc(
$result
)){
142.
echo
'<option value="'
,
$row
[
'PROVINCE_ID'
],
'">'
,
$row
[
'PROVINCE_NAME'
],
'</option>'
;
143.
}
144.
?>
145.
</select>
146.
147.
<label>อำเภอ : </label>
148.
<select id=
"selAmphur"
name=
"selAmphur"
>
149.
<option value=
""
> ------- เลือก ------ </option>
150.
</select><span id=
"waitAmphur"
></span>
151.
152.
<label>ตำบล : </llabellabelabel>
153.
<select id=
"selTumbon"
name=
"selTumbon"
>
154.
<option value=
""
> ------- เลือก ------ </option>
155.
</select><span id=
"waitTumbon"
></span>
156.
<input type=
"submit"
name=
"submit"
value=
"submit"
/>
157.
</form>
158.
<div>
159.
<p>::Before Sumbmit::</p>
160.
<p>รหัสและชื่อจังหวัด: <span id=
"provinceId"
></span><span id=
"provinceName"
></span></p>
161.
<p>รหัสและชื่ออำเภอ: <span id=
"amphurId"
></span><span id=
"amphurName"
></span></p>
162.
<p>รหัสและชื่อตำบล: <span id=
"tumbonId"
></span><span id=
"tumbonName"
></span></p>
163.
<p>รหัสไปรษณีย์ : <span id=
"zipcodeId"
></span><span id=
"zipcodeName"
></span></p>
164.
</div>
165.
<input type=
"hidden"
id=
"provinceHidden"
name=
"provinceHidden"
/>
166.
<input type=
"hidden"
id=
"amphurHidden"
name=
"amphurHidden"
/>
167.
<input type=
"hidden"
id=
"tumbonHidden"
name=
"tumbonHidden"
/>
168.
<?php
169.
if
(isset(
$_POST
[
'submit'
])) {
170.
echo
'<div>'
;
171.
echo
'<p>::After Sumbmit::</p>'
;
172.
echo
'<p>รหัสและชื่อจังหวัด: '
,
$_POST
[
'selProvince'
],
' '
,
$_POST
[
'provinceHidden'
],
'</p>'
;
173.
echo
'<p>รหัสและชื่ออำเภอ: '
,
$_POST
[
'selAmphur'
],
' ->> '
,
$_POST
[
'amphurHidden'
],
'</p>'
;
174.
echo
'<p>รหัสและชื่อตำบล: '
,
$_POST
[
'selTumbon'
],
' ->> '
,
$_POST
[
'tumbonHidden'
],
'</p>'
;
175.
echo
'</div>'
;
176.
}
177.
?>
178.
</body>
179.
</html>