时间戳

首页 > 解决方案 > 如何使用 javascript 创建 HTML 选择菜单选项

javascript - 如何使用 javascript 创建 HTML 选择菜单选项

问题描述

我正在尝试使用 javascript 为 HTML 页面将选项添加到选择菜单中，但我的代码似乎不想运行。在过去的几个小时里，我一直在循环运行，试图弄清楚这一点，但已经没有想法了。

对于这个作业，我不能编辑 Select HTML 标签，只能使用 javascript 来创建这个选项列表。

<!doctype html>
<html>
<head>
<title>Hawaii Absentee Application</title>
<!--                JavaScript Assignment 03                -->
<!--   Modified version of HI Absentee Ballot Application   -->
<!--                 Modified by: Ed Meyer                   -->
<script type="text/javascript">

  function validateForm() {
    // Stores the values for ballot types
    let ballotTypeNode = document.absentapp.ballotType;
    // If all are unchecked, will prompt user to check one before submission
    if (!ballotTypeNode[0].checked && !ballotTypeNode[1].checked && !ballotTypeNode[2].checked && !ballotTypeNode[3].checked) {
      alert("Please choose a ballot type before submitting!");
      return false;
    }
    // Stores the values for the language types
    let languageNode = document.absentapp.language;
    // If all are unchecked, will prompt user to check one before submission
    // English is set as the default language but user can change/select multiple languages
    if (!languageNode[0].checked && !languageNode[1].checked && !languageNode[2].checked && !languageNode[3].checked) {
      alert("Please select a language for the ballot instructions");
      return false;
    }
  }

  let januraryNode = document.createElement("option");
  januraryNode.value = 1;
  januraryNode.text = "Janurary";
  let feburaryNode = document.createElement("option");
  feburaryNode.value = 2;
  feburaryNode.text = "Feburary";
  let marchNode = document.createElement("option");
  marchNode.value = 3;
  marchNode.text = "March";
  let aprilNode = document.createElement("option");
  aprilNode.value = 4;
  aprilNode.text = "April";
  let mayNode = document.createElement("option");
  mayNode.value = 5;
  mayNode.text = "May";
  let juneNode = document.createElement("option");
  juneNode.value = 6;
  juneNode.text = "June";
  let julyNode = document.createElement("option");
  julyNode.value = 7;
  julyNode.text = "July";
  let augustNode = document.createElement("option");
  augustNode.value = 8;
  augustNode.text = "August";
  let septemberNode = document.createElement("option");
  septemberNode.value = 9;
  septemberNode.text = "September";
  let octoberNode = document.createElement("option");
  octoberNode.value = 10;
  octoberNode.text = "October";
  let novemberNode = document.createElement("option");
  novemberNode.value = 11;
  novemberNode.text = "November";
  let decemberNode = document.createElement("option");
  decemberNode.value = 12;
  decemberNode.text = "December";
  let monthNode = document.getElementById("month");
  monthNode.add(januraryNode);
  monthNode.add(feburaryNode);
  monthNode.add(marchNode);
  monthNode.add(aprilNode);
  monthNode.add(mayNode);
  monthNode.add(juneNode);
  monthNode.add(julyNode);
  monthNode.add(augustNode);
  monthNode.add(septemberNode);
  monthNode.add(octoberNode);
  monthNode.add(novemberNode);
  monthNode.add(decemberNode);


</script>
</head>
<body>
<form name="absentapp" method="post" onsubmit="return validateForm()">
<strong>Section I.</strong> I hereby request Absentee Ballots for the following Election(s):<br>
<input type="radio" name="ballotType" value="PrimaryOnly">Primary Only
<input type="radio" name="ballotType" value="GeneralOnly">General Only
<input type="radio" name="ballotType" value="PandG">Primary &amp; General
<input type="radio" name="ballotType" value="Special">Special Elections
<br>
I hereby request ballot instructions in:
<input type="checkbox" name="language" id="chinese"> Chinese
<input type="checkbox" name="language" id="japanese"> Japanese
<input type="checkbox" name="language" id="ilocano"> Ilocano
<input type="checkbox" name="language" id="english" checked="checked"> English
<br>
<br>
<strong>Section II. </strong>Failure to complete certain items will prevent acceptance of this application.<br>
1. Social Security Number:
<input type="text" name="ssn" id="ssn"><br>
2. Date of Birth:
<select id="month" name="month">

  <!-- Use JavaScript to populate Months -->
</select>
<select id="day" name="day">
  <!-- Use JavaScript to populate Days -->
</select>
<select id="year" name="year">
  <!-- Use JavaScript to populate Years -->
</select>
<br>
3. Gender:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<br>
4. Telephone Number - Home:
<input type="text" name="hometele" id="hometele">
<br>
5. Last Name:
<input type="text" name="lastname" id="lastname"><br>
First Name: <input type="text" name="firstname" id="firstname"> <br>
Middle Initial(s): <input type="text" name="initial" id="initial"> <br>

6. Residence Address In Hawaii Street:
<input type="text" name="resAdd" id="resAdd"> Apt No. <input type="text" name="aptNo" id="aptNo"> <br>
City/Town: <input type="text" name="citytown1" id="citytown1"> Zip Code <input type="text" name="zip1" id="zip1"><br>
<br>
<strong>Section III.</strong> Please mail my ballots to: <br>
Use same as Residence Address:
<input type="checkbox" name="copyResAdd" id="copyResAdd"> <br>
7. Name:
<input type="text" name="forwardName" id="forwardName"> <br>
8. Forwarding Address:
<textarea rows="3" name="forwardAddress" id="forwardAddress" ></textarea>
<br>
<br>

<strong>Section IV.</strong> I hereby affirm that: 1) I am the person named above; 2) I am requesting an absentee ballot for myself and no other; and 3) all information furnished on this application is true and correct.
<input type="checkbox" name="affirm" id="affirm" > <br>

<br>
<input type="submit" name="Submit" value="Submit">
</form>
*Notice: A Social Security Number is required by HRS &sect;11-15 and HRS &sect;15-4. It is used to prevent fraudulent registration and voting. Failure to furnish this information will prevent acceptance of this application. Pursuant to HRS &sect;11-20, the City/County Clerks may use this application to transfer a voter to the proper precinct to correspond with the address given above, under item 6.
</body>
</html>

出于某种原因，我当前的代码没有向标签添加任何内容，而且我仍然是 Javascript 的新手。有人可以帮我解决这个问题吗？

标签： javascriptselect

解决方案

你的脚本看起来不错。问题是它在浏览器知道有一个select元素之前就被执行了。浏览器从上到下读取您网页的内容。

当您let monthNode = document.getElementById("month");在浏览器知道有一个元素之前执行时，id="month"它会返回null.

解决方案很简单。将整个标签移动<script>到结束</body>标签之前

<html>
  <body>
   <!-- your html -->
   <script>
   // your script
   </script>
  </body>
</html>

推荐阅读