-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
137 lines (118 loc) · 4.37 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
131
132
133
134
135
136
137
<!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>Document</title>
</head>
<body>
<style>
.container_adreas {
/*set your style here*/
display: flex;
/* if you display the content as rom togget the word column to row*/
flex-direction: column;
}
.city_adreas_style {
/*set your style here*/
}
.diara_adreas_style {
/*set your style here*/
}
.commune_adreas_style {
/*set your style here*/
/*background-color: rgba(255, 0, 242, 0.892);*/
}
</style>
<div id="adreas">
<!--thi place for show the element dreas-->
</div>
<script src="./code.js"></script>
<script>
function wilayat() {
//if you want to use arabic remove this part "_ascii" for lines:
// 64 , 80 , 81 , 97 ,98
let title = (lable) => {
let v=document.createElement("option");
v.value = "no select";
v.textContent = lable;
return v
};
//createin 3 select in html
let html_select_city = document.createElement("select");
let html_select_diara = document.createElement("select");
let html_select_commune = document.createElement("select");
html_select_city.appendChild(title("wilaya"));
html_select_diara.appendChild(title("diara"));
html_select_commune.appendChild(title("baladiya"));
//create a container for the three select above
let container = document.createElement("div");
// set the css classe for the select
html_select_city.className = "city_adreas_style";
html_select_diara.className = "diara_adreas_style";
html_select_commune.className = "commune_adreas_style";
container.className = "container_adreas";
//set the id for grap the value for later
html_select_city.id = "city_adreas_id";
html_select_diara.id = "diara_adreas_id";
html_select_commune.id = "commune_adreas_id";
//this variable for grap the list of city
let city = new Set();
//this variable for grap the list of diara
let sub_city = new Set();
//this variable for grap the list of baladiya
let sub_sub_city = new Set();
//get the list of city
data.forEach((v, i) => {
city.add(v.wilaya_name_ascii);
});
city.forEach((v, i) => {
let temp = document.createElement("option");
temp.textContent = v;
temp.value = v;
html_select_city.appendChild(temp);
});
//listen on list of diara changing for change the list of baladiya
html_select_diara.onchange = (e) => {
html_select_commune.innerHTML =
"<option value='no select'>baladiya</option>";
sub_sub_city.clear();
data.forEach((v, i) => {
if (e.target.value === v.daira_name_ascii)
sub_sub_city.add(v.commune_name_ascii);
});
sub_sub_city.forEach((v, i) => {
let temp = document.createElement("option");
temp.textContent = v;
temp.value = v;
html_select_commune.appendChild(temp);
});
};
//listen on list of city changing for change the list of diara
html_select_city.onchange = (e) => {
html_select_diara.innerHTML =
"<option value='no select'>diara</option>";
sub_city.clear();
data.forEach((v, i) => {
if (e.target.value === v.wilaya_name_ascii)
sub_city.add(v.daira_name_ascii);
});
sub_city.forEach((v, i) => {
let temp = document.createElement("option");
temp.textContent = v;
temp.value = v;
html_select_diara.appendChild(temp);
});
};
//temp variable for set "no select" lable on select element
//add the select element on div container
container.appendChild(html_select_city);
container.appendChild(html_select_diara);
container.appendChild(html_select_commune);
document.getElementById("adreas").appendChild(container);
}
window.onload = wilayat();
</script>
</body>
</html>