CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
BrownEyedNinja
BrownEyedNinja

Reputation: 107

How to include Array Elements in Drop Down Box

I have an array in Javascript that consists of three different countries. I have a form in my HTML page that contains a drop down box. Instead of populating the drop down box using 

  <option value=""> *option name* </option>,

I want to try including the elements of my array in my drop down box, so when the user clicks it, they'll see the elements.

  var countries=["Sri Lanka","Bangladesh","India"]

I tried using the 'onclick' function in my HTML so that it would link to this following function

 function myFunction() {document.getElementById('Bangladesh').innerhtml= (countries[2])>

But I since removed it since it didn't work. How exactly can I populate the drop down box with elements from my array. My JS and HTML code have been provided below.

   <DOCTYPE html>

   <head>

   <script src="inquiries.js"> </script>
   </head>

    <body>

    <h1 align="center"class='header1'> <font size="8">   </font> </h1>
    <div class="busybox"> 
    <form name="myForm" form action="/action_page.php" onsubmit="return    validateForm();" method="post">

    <label for="fname"> <b> First Name </b> </label>

    <input type="text" id="fname" name="firstname" placeholder="Your  name......"
    required > 

    <label for="Birthday"> <b> E-Mail </b> </label>

    <input type="text" id="email" name="email" placeholder="Enter your E-mail address....." >

    <Label for="country"> <b>  Country </b> </Label>

    <select id="country" name="country">
    <option value="Sri Lanka"> Sri Lanka </option>

    <option value="India"> India </option>

    <option value="Bangladesh"> <p id="bangladesh">  </p> </option>
    </select> 

<label for="summary"> <b> Summary </b> </label>

<textarea id="summary" name="Summary" placeholder="Write a summary of your inquiry
here...." style="height:200px"> </textarea> 

<input type="submit" value="submit" id="sbox" onclick="myfunction()">




</form>

----JS CODE----

function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
    alert("Not a valid e-mail address");
    return false;
}else{
    return true;
} }   
  var countries = ["Sri Lanka", "India", "Bangladesh"];

  function myFunction() {document.getElementById('Bangladesh').innerhtml      =(countries[2])>

Upvotes: 3

Views: 104

Answers (4)

Hassan Imam
Hassan Imam

Reputation: 22574

Here is a solution using array#foreach.

var select = document.getElementById("selectCountry"); 
var countries = ["Sri Lanka", "India", "Bangladesh"];

countries.forEach((country) => {
    var element = document.createElement("option");
    element.textContent = country;
    element.value = country;
    select.appendChild(element);
});
<select id="selectCountry"></select>

Upvotes: 2

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

To do it with jQuery:

$(document).ready(function() {

var select = $('#country');
var countries = ["Sri Lanka", "India", "Bangladesh"];

for (var i=0; i<countries.length; i++) {
    var country = countries[i];
    var el = $("<option value='" + country + "'>" + country + "</option>");
    $(select).append(el);
}

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Label for="country"> <b>  Country </b> </Label>
<select id="country" name="country">

Upvotes: 1

Kavindra
Kavindra

Reputation: 1707

Try this:

$('#country').change(function(){
    var dropdown=document.createElement('select');
    var options="";
    for(i = 0; i < countries.length; i = i+1){
        options+= "<option value='"+countries[i]+"'>"+countries[i]+"</option>";
    }
    dropdown.innerHTML= options;
    document.getElementById('country').appendChild(dropdown);
});

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

var countries=["Sri Lanka","Bangladesh","India"];
document.getElementById("Select").innerHTML = "";
for(var i=0;i<countries.length;i++)
{
    var node = document.createElement("option");
    var textnode = document.createTextNode(countries[i]);
    node.appendChild(textnode);
  
    document.getElementById("Select").appendChild(node);
}
<select id="Select"></select>

Upvotes: 2

Related Questions