All Countries Drop Down List | HTML Select Country Name
Make money for being or staying online/internet.

You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!

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

Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW

Related Post(s)

» How to convert the News API Date format to DD MM YY

» Mr.

» YTS YIFY MOVIES API - PROJECT PREVIEW

» Mr.

» Mr.

collections_bookmark Category :: API
date_range Published :: 2 years ago At: 06:55 PM
event_note Detailed Date :: Jun 18th, 2021
person Writer :: Code
  • RECENT POSTS
1 month ago

Mr.

(sel


1 month ago

Mr.

(sel


1 month ago

Mr.

555


1 month ago

Mr.

555


1 month ago

Mr.

5550


1 month ago

Mr.

5550


1 month ago

Mr.

555


1 month ago

Mr.

555


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share