-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
130 lines (115 loc) · 5.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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">
<title>Location Selector</title>
<!-- css links -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- custom stylesheet -->
<style>
body {
font-family: 'Poppins', sans-serif;
}
.location-selector .card {
border-radius: 4px;
border-color: transparent;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
}
.location-selector .card .card-body {
padding: 40px 20px;
}
.location-selector label {
font-size: 20px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-radius: 4px;
outline: 0;
}
</style>
</head>
<body>
<!-- app start -->
<main id="app">
<div class="location-selector">
<div class="col-md-6 offset-md-3">
<div class="card mt-5">
<div class="card-body">
<div class="form-group">
<label for="" class="form-label"><span class="font-weight-bold" id="division">Dhaka</span> > <span class="font-weight-bold" id="district">Dhaka</span> > <span class="font-weight-bold" id="thana">Kallyanpur</span></label>
<select name="" id="selector" onchange="getNextStep()" class="form-control"></select>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- app end -->
<!-- js links -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
// select2 initial
$(document).ready(function() {
$('.form-control').select2();
});
// initial data
const selector = document.querySelector('#selector');
let selectorType = 0;
let url = 'https://muhaiminshihab.github.io/location-selector';
fetch(url + '/divisions.json')
.then(respose => respose.json())
.then(data => {
// get divisions
for (let index = 0; index < data.divisions.length; index++) {
selector.innerHTML += `<option value="${ data.divisions[index].name }">${ data.divisions[index].name }</option>`;
}
selectorType += 1;
});
// get next step
function getNextStep() {
if (selectorType == 1) {
const division = document.getElementById('division');
division.innerText = selector.value;
selector.innerHTML = '';
fetch(url + '/districts.json')
.then(respose => respose.json())
.then(data => {
// get districts
for (let index = 0; index < data.districts.length; index++) {
selector.innerHTML += `<option value="${ data.districts[index].name }">${ data.districts[index].name }</option>`;
}
});
selectorType += 1;
return true;
}
if (selectorType == 2) {
const district = document.getElementById('district');
district.innerText = selector.value;
selector.innerHTML = '';
fetch(url + '/upazilas.json')
.then(respose => respose.json())
.then(data => {
// get districts
for (let index = 0; index < data.upazilas.length; index++) {
selector.innerHTML += `<option value="${ data.upazilas[index].name }">${ data.upazilas[index].name }</option>`;
}
});
selectorType += 1;
return true;
}
if (selectorType == 3) {
const thana = document.getElementById('thana');
thana.innerText = selector.value;
return true;
}
};
</script>
</body>
</html>