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

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

 

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

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

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

ตัวอย่าง
กลุ่มที่ 1 กำหนดเป็น 0

<select name="province_name" data-where="2" data-set="0" class="ajax_address form-control input-sm">
    <option value="">-- เลือกจังหวัด --</option>
</select>

กลุ่มที่ 2 กำหนดเป็น 1

<select name="province_name2" data-where="2" data-set="1" class="ajax_address form-control input-sm">
    <option value="">-- เลือกจังหวัด --</option>
</select>

ทำให้ครบ ทั้งตำบล อำเภอ แลไปรษณีย์

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

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

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

<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>    

@Ninenik ขอบคุณมากๆ ครับผม