Question

我在Javascript中有一个由三个不同国家组成的数组。我的HTML页面中有一个包含下拉框的表单。而不是使用

填充下拉框

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

我想尝试在我的下拉框中包含我的数组元素，因此当用户点击它时，他们会看到元素。

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

我尝试使用＆＃39; onclick＆＃39;在我的HTML中运行，以便链接到以下函数

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

但是因为它没有用，所以我删除了它。我怎么能用我的数组中的元素填充下拉框。我的JS和HTML代码已在下面提供。

   <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])>

Answer 1

＆＃13;

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);
}

＆＃13;

<select id="Select"></select>

＆＃13;

Answer 2

以下是使用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>

Answer 3

试试这个：

$('#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);
});

Answer 4

用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">

如何在下拉框

4 个答案: