Skip to content

Instantly share code, notes, and snippets.

@shahali007

shahali007/populate-district-upozila.html

Last active April 27, 2022 08:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shahali007/f7913ee7a92d9f356e002cceb6af70dc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shahali007/f7913ee7a92d9f356e002cceb6af70dc to your computer and use it in GitHub Desktop.
Download ZIP
Populate division district upozilla js
Raw
populate-district-upozila.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="m-5">
<div id="msg" class="mb-3">Please select division</div>
<form action="">
<div class="row">
<div class="col-sm-3 mb-3">
<select name="divisions" id="divisions" class="form-select">
<option value="">বিভাগ</option>
</select>
</div>
<div class="col-sm-3 mb-3">
<select name="districts" id="districts" class="form-select">
<option value="">জেলা</option>
</select>
</div>
<div class="col-sm-3 mb-3">
<select name="upozila" id="upozila" class="form-select">
<option value="">উপজেলা</option>
</select>
</div>
<div class="col-sm-3 mb-3">
<button class="btn btn-dark w-100">Search</button>
</div>
</div>
</form>
<hr>
<div id="onload"></div>
</div>
<script src="populate.js"></script>
<script>
const divisionArr = [
{
id: 2,
name: 'বরিশাল'
},
{
id: 3,
name: 'চট্টগ্রাম'
},
{
id: 4,
name: 'ঢাকা'
},
{
id: 5,
name: 'খুলনা'
},
{
id: 6,
name: 'রাজশাহী'
},
{
id: 7,
name: 'সিলেট'
},
{
id: 8,
name: 'রংপুর'
},
{
id: 9,
name: 'ময়মনসিংহ'
}
];
const districtArr = [
{
id: 1,
divisionId: 2,
name: 'বরগুনা'
},
{
id: 2,
divisionId: 2,
name: 'ভোলা'
},
{
id: 3,
divisionId: 2,
name: 'ঝালকাঠি'
},
{
id: 4,
divisionId: 2,
name: 'পিরোজপুর'
},
{
id: 5,
divisionId: 2,
name: 'বান্দরবান'
},
{
id: 6,
divisionId: 2,
name: 'পটুয়াখালী'
},
{
id: 7,
divisionId: 2,
name: 'বরিশাল'
},
// chi
{
id: 8,
divisionId: 3,
name: 'চট্টগ্রাম'
},
{
id: 9,
divisionId: 3,
name: 'রাঙামাটি'
},
{
id: 10,
divisionId: 3,
name: 'খাগড়াছড়ি'
},
{
id: 11,
divisionId: 3,
name: 'কক্সবাজার'
},
{
id: 12,
divisionId: 3,
name: 'ফেনী'
},
{
id: 13,
divisionId: 3,
name: 'নোয়াখালী'
},
{
id: 14,
divisionId: 3,
name: 'লক্ষ্মীপুর'
},
{
id: 15,
divisionId: 3,
name: 'কুমিল্লা'
},
{
id: 16,
divisionId: 3,
name: 'ব্রাহ্মণবাড়িয়া'
},
{
id: 17,
divisionId: 3,
name: 'চাঁদপুর'
},
{
id: 18,
divisionId: 4,
name: 'ঢাকা'
},
{
id: 19,
divisionId: 4,
name: 'মানিকগঞ্জ'
},
{
id: 20,
divisionId: 4,
name: 'গাজীপুর'
},
{
id: 21,
divisionId: 4,
name: 'নারায়ণগঞ্জ'
},
{
id: 22,
divisionId: 5,
name: 'খুলনা'
},
{
id: 23,
divisionId: 5,
name: 'বাগেরহাট'
},
{
id: 24,
divisionId: 6,
name: 'রাজশাহী'
},
{
id: 25,
divisionId: 6,
name: 'বগুড়া'
},
{
id: 26,
divisionId: 7,
name: 'সিলেট'
},
{
id: 27,
divisionId: 7,
name: 'হবিগঞ্জ'
},
{
id: 28,
divisionId: 8,
name: 'রংপুর'
},
{
id: 29,
divisionId: 8,
name: 'দিনাজপুর'
},
{
id: 30,
divisionId: 9,
name: 'ময়মনসিংহ'
},
{
id: 31,
divisionId: 9,
name: 'জামালপুর'
},
{
id: 32,
divisionId: 9,
name: 'নেত্রকোনা'
},
]
const upozilaArr = [
{
id: 1,
districtId: 2,
name: 'বাকেরগঞ্জ'
},
{
id: 2,
districtId: 10,
name: 'বাবুগঞ্জ'
},
{
id: 3,
districtId: 15,
name: 'উজিরপুর'
},
{
id: 4,
districtId: 15,
name: 'বানারীপাড়া'
},
{
id: 5,
districtId: 21,
name: 'গৌরনদী'
},
{
id: 6,
districtId: 21,
name: 'আগৈলঝাড়া'
},
{
id: 7,
districtId: 27,
name: 'মেহেন্দীগঞ্জ'
},
{
id: 8,
districtId: 27,
name: 'মুলাদী'
},
{
id: 9,
districtId: 32,
name: 'হিজলা'
}
]
new Populate("divisions", "districts", "upozila", divisionArr, districtArr, upozilaArr, 'msg');
</script>
</body>
</html>
Raw
populate.js
class Populate {
constructor(divisions, districts, upozila, divisionArr, districtArr, upozilaArr, msg) {
this.divisions = document.getElementById(divisions);
this.districts = document.getElementById(districts);
this.upozila = document.getElementById(upozila);
this.msg = document.getElementById(msg);
this.divisionLabel = '<option value="">বিভাগ</option>';
this.zillaLabel = '<option value="">জেলা</option>';
this.upozillaLabel = '<option value="">উপজেলা</option>';
this.divisionArr = divisionArr;
this.districtArr = districtArr;
this.upozilaArr = upozilaArr;
this.load();
this.changeDivision();
this.changeDistrict();
}
load() {
window.onload = () => {
let op = this.divisionLabel;
this.divisionArr && this.divisionArr.length > 0 && this.divisionArr.forEach(element => {
op += `<option value="${element.id}">${element.name}</option>`
});
this.divisions.innerHTML = op;
this.msg.innerHTML = 'Please select division';
};
}
changeDivision() {
this.divisions.addEventListener('change', (e) => {
if(e.target.value !== "") {
this.msg.innerHTML = '';
let filteredDistricts = this.districtArr.filter((item) => item.divisionId === parseInt(e.target.value));
let op = this.zillaLabel;
filteredDistricts.forEach(element => {
op += `<option value="${element.id}">${element.name}</option>`
});
this.districts.innerHTML = op;
}
else {
this.districts.innerHTML = this.zillaLabel;
this.upozila.innerHTML = this.upozillaLabel;
this.msg.innerHTML = 'Please select division';
}
})
}
changeDistrict() {
this.districts.addEventListener('change', (e) => {
if(e.target.value !== "") {
let filteredUpozila = this.upozilaArr.filter((item) => item.districtId === parseInt(e.target.value));
let op = this.upozillaLabel;
filteredUpozila.forEach(element => {
op += `<option value="${element.id}">${element.name}</option>`
});
this.upozila.innerHTML = op;
}
else
this.upozila.innerHTML = upozillaLabel;
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment