Bộ lọc select tỉnh thành, quận huyện sử dựng API provinces.open-api.vn

<div>
<select id="city">
<option value="" selected>Chọn tỉnh thành</option>           
</select>
          
<select id="district">
<option value="" selected>Chọn quận huyện</option>
</select>

<select id="ward">
<option value="" selected>Chọn phường xã</option>
</select>
 </div>

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");
    printResult();
});
$("#district").change(() => {
    callApiWard(host + "d/" + $("#district").find(':selected').data('id') + "?depth=2");
    printResult();
});
$("#ward").change(() => {
    printResult();
})

var printResult = () => {
    if ($("#district").find(':selected').data('id') != "" && $("#city").find(':selected').data('id') != "" &&
        $("#ward").find(':selected').data('id') != "") {
        let result = $("#city option:selected").text() +
            " | " + $("#district option:selected").text() + " | " +
            $("#ward option:selected").text();
        $("#result").text(result)
    }

}
	</script>

Bộ lọc select tỉnh thành, quận huyện sử dựng API provinces.open-api.vn

Crop hình ảnh bằng CSS đơn giản và cần thiết

Bộ lọc select chọn Tỉnh Thành, Quận huyện, Xã phường, sử dụng data-id

Hướng dẫn CSS border gradient

Code chuyển Html sang Markdow

Nhập vào input hiển thị số dạng rút ngắn theo đơn vị

Đọc text trong hình ảnh

Tự động cập nhật nội dung cho div khi nhập văn bản vào textarea

Thay đổi màu link khi di chuột vào

Căn giữa Hình ảnh, thẻ Div, Text trong CSS

Bộ lọc select chọn Tỉnh Thành, Quận huyện, Xã phường