Mình đang có một form lấy thông tin giao hàng như sau:

Code Html sẽ là:

     <div class="cart-right">
                <div class="alert-container">
                </div>                          
                <h2 class="h2-title">
                    Thông Tin Giao Hàng
                </h2>
                <div class="name-phone">
                    <input type="text" name="name" value="" placeholder="Tên">
                    <input type="text" name="phone" value="" placeholder="Điện thoại">
                </div>
                    <input type="text" name="email" value="" placeholder="Email">
                <div class="province-district-ward">
                    <select name="city" id="city">
                        <option value="">Tỉnh/Tp</option>
                    </select>
                    <select name="district" id="district">
                        <option value="">Quận/Huyện</option>
                    </select>
                    <select name="ward" id="ward">
                        <option value="">Phường/Xã</option>
                    </select>
                </div>
                    <input type="text" name="address" value="" placeholder="Địa chỉ">
                    <input type="text" name="note" value=""  placeholder="Ghi chú">
                    <a href="confirm.html"><button class="main-button">Gửi Đơn Hàng</button></a>
            </div>

Bây giờ mình sẽ tạo một file apiprovince.js và thêm đoạn code sau:

const host = "https://provinces.open-api.vn/api/";
var callAPI = (api) => {
    return axios.get(api)
        .then((response) => {
            renderData(response.data, "city");
        });
}
callAPI('https://provinces.open-api.vn/api/?depth=1');
var callApiDistrict = (api) => {
    return axios.get(api)
        .then((response) => {
            renderData(response.data.districts, "district");
        });
}
var callApiWard = (api) => {
    return axios.get(api)
        .then((response) => {
            renderData(response.data.wards, "ward");
        });
}


var renderData = (array, select) => {
    let row = ' <option disable value="">Chọn</option>';
    array.forEach(element => {
        row += `<option data-id="${element.code}" value="${element.name}">${element.name}</option>`
    });
    document.querySelector("#" + select).innerHTML = row
}


$("#city").change(() => {
    callApiDistrict(host + "p/" + $("#city").find(':selected').data('id') + "?depth=2");
   
});
$("#district").change(() => {
    callApiWard(host + "d/" + $("#district").find(':selected').data('id') + "?depth=2");
 
});
$("#ward").change(() => {
   
})

Đồng thời mình sẽ link các đường dẫn vào:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="asset/js/apiprovince.js"></script>

Sau đó mình sẽ thêm các id gồm #city, #district, "#ward" vào các thẻ select của file Html bên trên cụ thể:

            <div class="cart-section-right">
                <h2 class="main-h2">Thông tin Giao hàng</h2>
                <div class="cart-section-right-input-name-phone">
                    <input type="text" placeholder="Tên" name="" id="">
                    <input type="text" placeholder="Điện thoại" name="" id="">
                </div>
                <div class="cart-section-right-input-email">
                    <input type="text" placeholder="Email" name="" id="">
                </div>
                <div class="cart-section-right-select">
                    <select name="" id="city">
                        <option value="">Tỉnh/Tp</option>
                    </select>
                    <select name="" id="district">
                        <option value="">Quận/huyện</option>
                    </select>
                    <select name="" id="ward">
                        <option value="">Phường/xã</option>
                    </select>
                </div>
                <div class="cart-section-right-input-adress">
                    <input type="text" placeholder="Địa chỉ" name="" id="">
                </div>
                <div class="cart-section-right-input-note">
                    <input type="text" placeholder="Ghi chú" name="" id="">
                </div>
                <button class="main-btn">Gửi Đơn Hàng</button>
            </div>
        </div>

và kết quả chúng ta có là:

Quá ngon lành cành đào và tiện lợi đúng không anh em. Anh em có thể nghiên cứu thêm ở đây nhé:

• https://provinces.open-api.vn/