Question

0

52

Vistas

dynamically populate data in dropdown using javascript api using axois

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" }
]

7 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T08:31:51.742Z

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 .

Answer 2 · 2022-07-04T08:31:51.749Z

Create "OPTION" element
Set its value using setAttribute
Update that to the select element

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>