How to Populate a SELECT Dropdown with JSON Data using JavaScript

json javascript

← PrevNext →

Last Updated: 7th October 2025

In this tutorial, you'll learn two simple and effective ways to populate an HTML <select> dropdown list using JSON data and JavaScript. These examples are beginner friendly and ideal for modern web development.

Example 1: We'll create a static JSON array directly in JavaScript and dynamically bind its values to a <select> element.

Example 2: We'll fetch JSON data from an external file using the modern fetch() API, parse the response, and populate the dropdown with the retrieved values.

Related example: SELECT Element Set Focus on Page Load or Expand SELECT Options on Page Load

See this demo

🚀 First Check whether your JSON dataset is valid or not and then proceed.

Example 1: Bind JSON Data to an HTML <select> Element with JavaScript

First, I'll define a JSON array within a JavaScript function and populate it with sample data. Then, I'll loop through each item in the array and dynamically insert the values into an HTML <select> dropdown.

Similar example: How to Convert JSON Data Dynamically to an HTML Table using JavaScript

The HTML and the Script

<html>
<head>
    <title>Bind SELECT Dropdown with JSON using JavaScript</title>
</head>
<body>
  <p>
    <input type="button" onclick="populateSelect()" value="Click to Populate SELECT with JSON" />
  </p>

  <!--The SELECT element.-->
  <select id="sel" onchange="show(this)">
      <option value="">-- Select --</option>
  </select>

  <p id="msg"></p>      <!--The result-->
</body>

<script>
  function populateSelect() {
    // Define the JSON array of bird objects.
    const birds = [
      { ID: "001", Bird_Name: "Eurasian Collared-Dove" },
      { ID: "002", Bird_Name: "Bald Eagle" },
      { ID: "003", Bird_Name: "Cooper's Hawk" }
    ];

    const selectElement = document.getElementById("sel");

    // Clear existing options except the default.
    selectElement.innerHTML = '<option value="">-- Select --</option>';

    // Loop through the array and add each bird as an option.
    birds.forEach(bird => {
      const option = document.createElement("option");
      option.value = bird.ID;
      option.textContent = bird.Bird_Name;
      selectElement.appendChild(option);
    });
  }

  function show(selectElement) {
    const selectedOption = selectElement.options[selectElement.selectedIndex];
    const message = document.getElementById("msg");

    // Display the selected bird name and ID.
    message.innerHTML = `
      Selected Bird: <b>${selectedOption.text}</b><br>
      ID: <b>${selectElement.value}</b>
    `;
  }
</script>
</html>
Try it

Notice how I retrieved the selected option's text from the <select> element using: ele.options[ele.selectedIndex].text

Related example: How to Use AngularJS ng-options to Bind or Populate JSON Array to a SELECT DropDownList

🚀 Did you know you can instantly check if your JSON is valid, just by clicking a button? It's super easy and saves tons of debugging time. Give it a try!

Example 2: Fetch External JSON and Dynamically Fill a <select> List with JavaScript

<body>
    <select id="sel" onchange="show(this)">
        <option value="">-- Select --</option>
    </select>

    <p id="msg"></p>
</body>

<script>
  async function populateSelect() {
    try {
      const response = await fetch('../../library/sample.json'); // Update path as needed
      if (!response.ok) throw new Error('Network response was not ok');

      const birds = await response.json();
      const ele = document.getElementById('sel');

      birds.forEach(bird => {
        const option = document.createElement('option');
        option.value = bird.ID;
        option.textContent = bird.Name;
        ele.appendChild(option);
      });
    } catch (error) {
      console.error('Error fetching JSON:', error);
    }
  }

  function show(ele) {
    // Get the selected value from <select> element and show it.
    let msg = document.getElementById('msg');
    msg.innerHTML = 'Selected Bird: <b>' + ele.options[ele.selectedIndex].text + '</b> </br>' +
      'ID: <b>' + ele.value + '</b>';
  }

  populateSelect();
</script>
Try it

In the above example, the function populateSelect() automatically loads data from an external JSON file and uses it to fill a dropdown menu (<select> element) on your webpage.

Related... There's another simple method in JavaScript that you can use to fetch data from external files. See this article. This method uses async and await. Its a must see article.

Here's how it works:

It uses fetch(): This is a modern JavaScript method for getting data from a file or server. In this case, it's used to load a JSON file that contains a list of birds.

It's marked async and uses await: These keywords make the function asynchronous, which means it can pause and wait for the data to load, without freezing the rest of your webpage.

* async lets you use await inside the function.
* await tells JavaScript to "wait here" until the data is ready before continuing.

It checks if the data was loaded successfully: If the file couldn't be fetched (maybe it's missing or the internet is down), it throws an error so you can catch and handle it.

It reads the JSON and loops through it: Once the data is loaded, it loops through each bird in the list and creates a new <option> for the dropdown.

It adds each bird to the dropdown: Each bird's name becomes the visible text, and its ID becomes the value behind the scenes.

👉 Do you know you can create a Cascading SELECT dropdown list using JSON data? Check this out.

Similar example: How to add/remove Multiple or Single SELECT options using a simple script.

Conclusion

With just a few lines of JavaScript, you can turn static dropdowns into dynamic, data-driven elements using JSON. Whether you're working with local arrays or fetching data asynchronously (especially with fetch() and async/await), this technique makes your forms smarter and more interactive. Try it out and you'll be surprised how much smoother your UI can feel!

📖 Read Next

← PreviousNext →