|
 |
| |
อยากทราบว่า บรรทัดไหนของไฟล์ AutoProvince ที่ทำให้ <select id="amphur">และ<select id="province"> |
| |
 |
|
|
 |
 |
|
อยากทราบว่า บรรทัดไหนของไฟล์ AutoProvince ที่ทำให้ <select id="amphur">และ<select id="province"> แสดงออกมาเป็นPROVINCE_IDและ AMPHUR_ID ผมต้องการจะเปลี่ยน <select id="amphur">และ<select id="province"> ให้เป็นPROVINCE_NAMEและ AMPHUR_NAME
ขอบคุณผู้ใจบุญที่ช่วยเหลือ ล่วงหน้าไว้ณ.ที่นี้เลยคับ ขอให้พบแต่ความสุขเทอญ
INDEX.php
Code (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>Auto Province JS</title>
</head>
<div>
<select id="province">
<option>- กรุณาเลือกจังหวัด -</option>
</select>
</div>
<div>
<select id="amphur">
<option>- กรุณาเลือกอำเภอ -</option>
</select>
<input type="text" id="postcode" />
</div>
<div>
<select id="district">
<option>- กรุณาเลือกตำบล -</option>
</select>
</div>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="AutoProvince.js"></script>
<script>
$('body').AutoProvince({
PROVINCE: '#province', // select div สำหรับรายชื่อจังหวัด
AMPHUR: '#amphur', // select div สำหรับรายชื่ออำเภอ
DISTRICT: '#district', // select div สำหรับรายชื่อตำบล
POSTCODE: '#postcode', // input field สำหรับรายชื่อรหัสไปรษณีย์
arrangeByName: false // กำหนดให้เรียงตามตัวอักษร
});
</script>
</body>
</html>
AutoProvince.js
Code (JavaScript)
/*
*/
;(function( $ ){
$.fn.AutoProvince = function( options ) {
var Setting = $.extend( {
PROVINCE: '#province', // select div สำหรับรายชื่อจังหวัด
AMPHUR: '#amphur', // select div สำหรับรายชื่ออำเภอ
DISTRICT: '#district', // select div สำหรับรายชื่อตำบล
POSTCODE: '#postcode', // input field สำหรับรายชื่อรหัสไปรษณีย์
arrangeByName: false // กำหนดให้เรียงตามตัวอักษร
}, options);
return this.each(function() {
var xml;
var dataUrl = "thailand.xml";
$(function() {
initialize();
});
function initialize(){
$.ajax({
type: "GET",
url: dataUrl,
dataType: "xml",
success: function(xmlDoc) {
xml = $(xmlDoc);
_loadProvince();
addEventList();
},
error: function() {
console.log("Failed to get xml");
}
});
}
function _loadProvince()
{
var list = [];
xml.find('table').each(function(index){
if($(this).attr("name") == Setting.PROVINCE.split("#")[1]){
var PROVINCE_ID = $(this).children().eq(0).text();
var PROVINCE_NAME = $(this).children().eq(2).text();
if(PROVINCE_ID)list.push({id:PROVINCE_ID,name:PROVINCE_NAME});
}
});
if(Setting.arrangeByName){
AddToView(list.sort(SortByName),Setting.PROVINCE);
}else{
AddToView(list,Setting.PROVINCE);
}
}
function _loadAmphur(PROVINCE_ID_SELECTED)
{
var list = [];
var isFirst = true;
$(Setting.AMPHUR).empty();
xml.find('table').each(function(index){
if($(this).attr("name") == Setting.AMPHUR.split("#")[1]){
var AMPHUR_ID = $(this).children().eq(0).text();
var AMPHUR_NAME = $(this).children().eq(2).text();
var POSTCODE = $(this).children().eq(3).text();
var PROVINCE_ID = $(this).children().eq(5).text();
if(PROVINCE_ID_SELECTED == PROVINCE_ID && AMPHUR_ID){
if(isFirst)_loadDistrict(AMPHUR_ID);
isFirst = false;
list.push({id:AMPHUR_ID,name:AMPHUR_NAME,postcode:POSTCODE});
$(Setting.POSTCODE).val(POSTCODE);
}
}
});
if(Setting.arrangeByName){
AddToView(list.sort(SortByName),Setting.AMPHUR);
}else{
AddToView(list,Setting.AMPHUR);
}
}
function _loadDistrict(AMPHUR_ID_SELECTED)
{
var list = [];
$(Setting.DISTRICT).empty();
xml.find('table').each(function(index){
if($(this).attr("name") == Setting.DISTRICT.split("#")[1]){
var DISTRICT_ID = $(this).children().eq(0).text();
var DISTRICT_NAME = $(this).children().eq(2).text();
var AMPHUR_ID = $(this).children().eq(3).text();
if(AMPHUR_ID_SELECTED == AMPHUR_ID && DISTRICT_ID){
list.push({id:DISTRICT_ID,name:DISTRICT_NAME});
}
}
});
if(Setting.arrangeByName){
AddToView(list.sort(SortByName),Setting.DISTRICT);
}else{
AddToView(list,Setting.DISTRICT);
}
}
function addEventList(){
$(Setting.PROVINCE).change(function(e) {
var PROVINCE_ID = $(this).val();
_loadAmphur(PROVINCE_ID);
});
$(Setting.AMPHUR).change(function(e) {
var AMPHUR_ID = $(this).val();
$(Setting.POSTCODE).val($(this).find('option:selected').attr("POSTCODE"));
_loadDistrict(AMPHUR_ID);
});
}
function AddToView(list,key){
for (var i = 0;i<list.length;i++) {
if(key != Setting.AMPHUR){
$(key).append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
}else{
$(key).append("<option value='"+list[i].id+"' POSTCODE='"+list[i].postcode+"'>"+list[i].name+"</option>");
}
}
}
function SortByName(a, b){
var aName = a.name.toLowerCase();
var bName = b.name.toLowerCase();
return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
}
});
};
})( jQuery );
Tag : PHP
|
ประวัติการแก้ไข
2018-03-26 11:34:04
2018-03-26 11:35:12
2018-03-26 14:03:30
|
 |
 |
 |
 |
| Date :
2018-03-26 11:32:39 |
By :
shiowa |
View :
2435 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
บรรทัดที่51
if(PROVINCE_ID)list.push({id:PROVINCE_ID,name:PROVINCE_NAME});
เปลี่ยนเป็น
if(PROVINCE_ID)list.push({id:PROVINCE_NAME,name:PROVINCE_NAME});
list menu จัดเก็บ เป็น ชื่อจังหวัดแล้ว(PROVINCE_NAME) แต่เหมือนPROVINCE_IDจะโยงกับAMPHUR_ID
พอแก้แล้ว list menu AMPHUR ไม่ทำงาน
|
| |
|
|
| |
| Date :
2018-03-26 12:03:41 |
By :
shiowa |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ตอนนี้ผมเปลี่ยนที่บรรทัด077.
list.push({id:AMPHUR_ID,name:AMPHUR_NAME,postcode:POSTCODE});$(Setting.POSTCODE).val(POSTCODE);
เป็น
list.push({id:AMPHUR_NAME,name:AMPHUR_NAME,postcode:POSTCODE});
$(Setting.POSTCODE).val(POSTCODE);
ส่วนบรรทัด51 คงเดิมคับ
if(PROVINCE_ID)list.push({id:PROVINCE_ID,name:PROVINCE_NAME});
สรุปคือ ตอนนี้ จัดเก็บอำเภอเป็นตัวหนังสือได้แล้ว
แต่จังหวัดยังเป็นIDอยู่เลย พอจะมีวิธีแก้หรือเพิ่มเติมให้ลิสเมนูจังหวัด จัดเก็บเป็นตัวหนังสือไหมคับ
|
ประวัติการแก้ไข
2018-03-26 12:27:57
| |
|
|
| |
| Date :
2018-03-26 12:21:06 |
By :
shiowa |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไม่วันนี้เป็นเงียบๆ รึเงียบแต่เรารึป่าว 555
|
| |
|
|
| |
| Date :
2018-03-26 15:08:38 |
By :
shiowa |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
