สอบถามการดึงค่า จังหวัด อำเภอ ตำบล รหัสไปรษณีย์

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามการดึงค่า จังหวัด อำเภอ ตำบล รหัสไปรษณีย์

สอบถามการดึงค่า จังหวัด อำเภอ ตำบล รหัสไปรษณีย์

พอดีได้ดูจากลิ้งค์นี้มา https://www.ninenik.com/content.php?arti_id=684 via @ninenik

 

ในกรณีที่ หน้า 1 ต้องให้กรอกข้อมูล จังหวัด อำเภอ ตำบล รหัสไปรษณีย์ 2 ชุด ต้องแก้ไขโค้ดส่วนไหนบ้างครับ

ลองให้อยู่หน้าเดียวกันแล้ว ข้อมูลเปลี่ยนทั้ง 2 ชุดเหมือนกันเลยครับ



Aionclock 13-04-2020 18:49:38

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ต้องประยุกตนิดหน่อย โดยเพิ่ม attribute เพื่อแยก หรือแบ่งกลุ่มชุดของ element เช่น ใช้เป็น
data-set="0" สำหรับกลุ่มแรก และ data-set="1"  สำหรับกลุ่มที่สอง
อย่าลืมว่าจะต้องเริ่มที่ 0 เสมอ

ตัวอย่าง
กลุ่มที่ 1 กำหนดเป็น 0
1
2
3
<select name="province_name" data-where="2" data-set="0" class="ajax_address form-control input-sm">
    <option value="">-- เลือกจังหวัด --</option>
</select>

กลุ่มที่ 2 กำหนดเป็น 1
1
2
3
<select name="province_name2" data-where="2" data-set="1" class="ajax_address form-control input-sm">
    <option value="">-- เลือกจังหวัด --</option>
</select>
ทำให้ครบ ทั้งตำบล อำเภอ แลไปรษณีย์

ถ้าชื่อจังหวัด ตัวที่สองคนละชื่อกับตัวแรก ก็ปรับตอนค่าเริ่มต้นเป็น

1
2
3
4
5
6
$.post("getAddress.php",{
    IDTbl:1
},function(data){
    $("select[name=province_name]").html(data);   
    $("select[name=province_name2]").html(data);   
});


และแก้ไข javascript ที่เหลือ เล็กน้อยดังนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script type="text/javascript">
$(function(){
      
    // เมื่อโหลดขึ้นมาครั้งแรก ให้ ajax ไปดึงข้อมูลจังหวัดทั้งหมดมาแสดงใน
    // ใน select ที่ชื่อ province_name
    // หรือเราไม่ใช้ส่วนนี้ก็ได้ โดยไปใช้การ query ด้วย php แสดงจังหวัดทั้งหมดก็ได้
    $.post("getAddress.php",{
        IDTbl:1
    },function(data){
        $("select[name=province_name]").html(data);   
        $("select[name=province_name2]").html(data);   
    });
      
    // สร้างตัวแปร สำหรับเก็บค่าข้อความให้เลือกรายการ เช่น เลือกจังหวัด
    // เราจะเก็บค่านี้ไว้ใช้กรณีมีการรีเซ็ต หรือเปลี่ยนแปลงรายการใหม่
    var chooseText=[];
    $(".ajax_address").each(function(i,k){
        var initObj=$(".ajax_address").eq(i).find("option:eq(0)")[0];
        chooseText[i]=initObj;
    });
      
    // ส่วนของการตรวจสอบ และดึงข้อมูล ajax สังเกตว่าเราใช้ css คลาสชื่อ ajax_address
    // ดังนั้น css คลาสชื่อนี้จำเป็นต้องกำหนด หรือเราจะเปลี่ยนเป็นชื่ออื่นก็ได้ แต่จำไว้ว่า
    // ต้องเปลี่ยนในส่วนนี้ด้วย
    $(".ajax_address").on("change",function(){
        var indexObj = $(".ajax_address").index(this); // เก็บค่า index ไว้ใช้งานสำหรับอ้างอิง
        var setObj = $(this).data("set");
        // วนลูปรีเซ็ตค่า select ของแต่ละรายการ โดยเอาค่าจาก array ด้านบนที่เราได้เก็บไว้
        $("select[data-set='"+setObj+"']").each(function(i,k){
            if(i>indexObj){ // รีเซ็ตค่าของรายการที่ไม่ได้เลือก
                $(".ajax_address").eq(i).html(chooseText[i]);
            }
        });
          
        var obj=$(this);       
        var IDCheck=obj.val();  // ข้อมูลที่เราจะใช้เช็คกรณี where เช่น id ของจังหวัด
        var IDWhere=obj.data("where"); // ค่าจาก data-where ค่าน่าจะเป็นตัวฟิลด์เงื่อนไขที่เราจะใช้
        var targetObj=$("select[data-where='"+(IDWhere+1)+"']:eq("+setObj+")"); // ตัวที่เราจะเปลี่ยนแปลงข้อมูล
        if(targetObj.length>0){ // ถ้ามี obj เป้าหมาย
            targetObj.html("<option>.. กำลังโหลดข้อมูล.. </option>");  // แสดงสถานะกำลังโหลด 
            setTimeout(function(){ // หน่วงเวลานิดหน่อยให้เห็นการทำงาน ตัดเออกได้
                // ส่งค่าไปทำการดึงข้อมูล option ตามเงื่อนไข
                 $.post("getAddress.php",{
                    IDTbl:IDWhere,
                    IDCheck:IDCheck,
                    IDWhere:IDWhere-1
                },function(data){
                    targetObj.html(data);   // แสดงค่าผลลัพธ์
                });   
            },1500);
        }
    });
      
});
</script>


บทความแนะนำที่เกี่ยวข้อง
ใช้ ajax ประยุกต์ดึงข้อมูล จังหวัด อำเภอ ตำบล รหัสไปรษณีย์ในประเทศไทยอ่าน 26,732
ninenik 14-04-2020
 ความคิดเห็นที่ 2
@Ninenik ขอบคุณมากๆ ครับผม


aionclock 24-04-2020 13:22







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ