jquery เพิ่มที่อยู่ จังหวัด ยันตำบล 2 ที่ในหน้าเดียวกัน

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา jquery เพิ่มที่อยู่ จังหวัด ยันตำบล 2 ที่ในหน้าเดียวกัน

jquery เพิ่มที่อยู่ จังหวัด ยันตำบล 2 ที่ในหน้าเดียวกัน
ใส่ฟอร์ม เพิ่มที่อยู่จังหวัด ถึงตำบล ใช้โค้ด jquerythailand ในหน้าเดียวกัน มีสองสถานที่ได้ยังไงบ้างครับ

ประมาณนี้ กรอก ที่อยู่ต้นทาง.......(ฟอร์ม)
               กรอก ที่อยู่ปลายทาง...(ฟอร์ม)
กรอกแล้วให้แสดงผลด้านล่างฟอร์ม

ช่วยแนะนำไอเดีย หรือมีโค้ดตัวอย่างจะขอบคุณมากครับ


วัฒนา099 22-06-2022 18:44:50

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

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


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


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

 ความคิดเห็นที่ 1
รูปแบบน่าจะใช้งานเหมือน jquery ปลั๊กอินทั่วไป ตามรูปแบบที่เขากำหนด มีบอกไว้ในหน้า GitHub

สร้างฟอร์มข้อมูลสองอัน แล้วกำหนดชื่อ ให้แตกต่างกัน ฟอร์มแรก เช่นจังหวดใช้ชื่อเป็น 
province1 ในฟอร์มที่สองใช้เป็น  province2 แนวทางประมาณนี้ แล้วก็เรียกใช้ปกติ

$.Thailand({
    database: './jquery.Thailand.js/database/db.json',

    $district: $('#demo1 [name="district"]'),
    $amphoe: $('#demo1 [name="amphoe"]'),
    $province: $('#demo1 [name="province"]'),
    $zipcode: $('#demo1 [name="zipcode"]'),

    onDataFill: function(data){
        console.info('Data Filled', data);
    },

    onLoad: function(){
        console.info('Autocomplete is ready!');
        $('#loader, .demo').toggle();
    }
});

// watch on change

$('#demo1 [name="district"]').change(function(){
    console.log('ตำบล', this.value);
});
$('#demo1 [name="amphoe"]').change(function(){
    console.log('อำเภอ', this.value);
});
$('#demo1 [name="province"]').change(function(){
    console.log('จังหวัด', this.value);
});
$('#demo1 [name="zipcode"]').change(function(){
    console.log('รหัสไปรษณีย์', this.value);
});

/******************
 *     DEMO 1     *
******************/
// demo 1: load database from json. if your server is support gzip. we recommended to use this rather than zip.
// for more info check README.md

$.Thailand({
    database: './jquery.Thailand.js/database/db.json',

    $district: $('#demo3 [name="district2"]'),
    $amphoe: $('#demo3 [name="amphoe2"]'),
    $province: $('#demo3 [name="province2"]'),
    $zipcode: $('#demo3 [name="zipcode2"]'),

    onDataFill: function(data){
        console.info('Data Filled', data);
    },

    onLoad: function(){
        console.info('Autocomplete is ready!');
        $('#loader3, demo3').toggle();
    }
});


ninenik 22-06-2022
 ความคิดเห็นที่ 2
ขอบคุณมากๆครับ


วัฒนา099 23-06-2022 06:19
 ความคิดเห็นที่ 3
พอดีลองเอาโค้ดไปทำ แล้วไมได้
พอดีผมไม่ค่อยมีความรู้นะครับ

ทางผมlocalhost ต้องทำฐานข้อมูลด้วยหรือเปล่าครับ

 ตัวนี้นะครับ database: './jquery.Thailand.js/database/db.json',


ผมมีjs อีกตัวที่ที่เอามาจากเน็ต(เชื่อมโยงกับ JqueryThailand ขออภัยที่จำต้นฉบับที่มาไม่ได้)

<script>
$.Thailand({
    $district: $('#sub_district'), // input ของตำบล
    $amphoe: $('#district'), // input ของอำเภอ
    $province: $('#province'), // input ของจังหวัด
    $zipcode: $('#zipcode'), // input ของรหัสไปรษณีย์
});
</script>
ประมาณนี้และมีการลิงค์ราว 6 ลิงค์ไปที่github และ jquery มันก็ค้นดึงที่อยู่มาได้แบบออโต้ฟิลด้วยครับ โดยทางผม(โลคัลโฮส)ไม่มีฐานข้อมูล


วัฒนา099 23-06-2022 14:17
 ความคิดเห็นที่ 4
ตัว database ถ้าโหลดไฟล์มาทั้งหมด เขาจะมีไฟล์มาให้ เราจะอ้างอิงจากไฟล์ที่โหลดมา หือจะอ้างอิงจากที่มีอยู่แล้ว
บนเซิร์ฟเวอร์ก็ได้ 



เวลากำหนด path ก็อ้างอิงให้ถูกต้อง 

database: './jquery.Thailand.js/database/db.json',
เรื่อง path การอ้างอิงตำแหน่งไฟล์ ถ้ายังไม่มีพื้นฐานของค้นเพิ่มเติมดู
ส่วนเวลาเราเรียกจากบนเซิร์ฟเวอร์เลย เช่น แบบนี้ก็ทำได้ *ตัวอย่าง


database: 'https://raw.githubusercontent.com/earthchie/jquery.Thailand.js/master/jquery.Thailand.js/database/db.json',




ninenik 23-06-2022
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ