All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.

Tutorial

Html Markup

copy

	
<div class="container">

<h1>All countries Dropdown List  </h1>

<select id="countries" name="countries">  </select>  

</div>

For the value attribute, you can decide to either store or pass in the full country name, alpha2code, alpha3code, or callingCodes. etc

Example

Full country name: Uganda
Alpha2code: UG
Alpha3code: UGA
callingCodes: 256

Javascript Code

copy


//Listening/waitig for the document to be ready
document.addEventListener('DOMContentLoaded', () => {

const selectDrop = document.querySelector('#countries');
// const selectDrop = document.getElementById('countries');


fetch('http://restcountries.eu/rest/v2/all').then(res => {
return res.json();
}).then(data => {
let output = "";
data.forEach(country => {
  output += `
    <option value="${country.name}">${country.name}  </option>`;
})

selectDrop.innerHTML = output;

}).catch(err => {
console.log(err);
})


});

You can also clone the project via my Github repo: https://github.com/KasiitaTimothy/All-countries-dropdown-list

If this article was useful to you, please consider subscribing to my channel: Oston Code Cypher

Related Post(s)

» YTS YIFY MOVIES API - PROJECT PREVIEW

» Open Weather API - Source Code

» How to display News with out searching - NEWS API(Source Code)

» How to create a search engine to search for news - News API | using Jquery

» Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Category :: API
Published :: 4 months ago At: 06:55 PM
Detailed Date :: Jun 18^th, 2021
Writer :: Code

RECENT POSTS

3 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.

4 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.

4 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.

4 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.

4 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.

6 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?

8 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).

11 months ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.

Subscribe