it is a dropdown with top and other in the world
the cities and data will be dynamically populated in dropdown using javascript API using Axios
With external Apis.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">---Top Cities---</option>
<option value="2">Mumbai</option>
<option value="3">Delhi</option>
<option value="1">Bengaluru</option>
<option value="2">Chennai</option>
<option value="3">Kolkata</option>
<option value="2">---Other Cities---</option>
<option value="3">Bhavnagar</option>
<option value="3">Udaipur</option>
<option value="3">Pune</option>
</select>[
{ "id": "1", "name": "Mumbai", "state": "Maharashtra" },
{ "id": "2", "name": "Delhi", "state": "Delhi" },
{ "id": "3", "name": "Bengaluru", "state": "Karnataka" },
{ "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
{ "id": "5", "name": "Hyderabad", "state": "Telangana" },
{ "id": "6", "name": "Chennai", "state": "Tamil Nadu" },
{ "id": "7", "name": "Kolkata", "state": "West Bengal" }
]
let options = [
{ "id": "1", "name": "Mumbai", "state": "Maharashtra" },
{ "id": "2", "name": "Delhi", "state": "Delhi" },
{ "id": "3", "name": "Bengaluru", "state": "Karnataka" },
{ "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
{ "id": "5", "name": "Hyderabad", "state": "Telangana" },
{ "id": "6", "name": "Chennai", "state": "Tamil Nadu" },
{ "id": "7", "name": "Kolkata", "state": "West Bengal" }
]
const select = document.querySelector(".form-select");
options.map(val=>{
let opt = document.createElement("option");
opt.innerText = val.name
select.appendChild(opt);
})
Just add this in your javascript file .
"OPTION" elementvalue using setAttributeselect elementconst topCities = [
{ "id": "1", "name": "Mumbai", "state": "Maharashtra" },
{ "id": "2", "name": "Delhi", "state": "Delhi" },
{ "id": "3", "name": "Bengaluru", "state": "Karnataka" },
{ "id": "4", "name": "Ahmedabad", "state": "Gujarat" },
{ "id": "5", "name": "Hyderabad", "state": "Telangana" },
{ "id": "6", "name": "Chennai", "state": "Tamil Nadu" },
{ "id": "7", "name": "Kolkata", "state": "West Bengal" }
]
const otherCities = [
{ "id": "1", "name": "Bhavnagar", "state": "Bhavnagar" },
{ "id": "2", "name": "Udaipur", "state": "Udaipur" },
{ "id": "3", "name": "Pune", "state": "Pune" },
];
const select = document.querySelector('select');
function addOption(label, value) {
const option = document.createElement("OPTION");
option.setAttribute('value', value);
const text = document.createTextNode(label);
option.appendChild(text);
select.appendChild(option);
}
addOption("---Top Cities---", "1");
topCities.forEach((city) => {
addOption(city.name, city.id);
});
addOption("---Other Cities---", "2");
otherCities.forEach((city) => {
addOption(city.name, city.id);
});<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
</select>