es un desplegable con top y otro en el mundo
las ciudades y los datos se completarán dinámicamente en el menú desplegable usando la API de JavaScript usando Axios
Con Apis externo.
<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); })Simplemente agregue esto en su archivo javascript.
"OPTION"value usando setAttributeselect const 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>