个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 22:41:32 30 4
gpt4 key购买 nike

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

对于此作业，我无法编辑 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 的新手。有人可以帮我解决这个问题吗？

最佳答案

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

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

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

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

关于javascript - 如何使用 javascript 创建 HTML 选择菜单选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58568719/

30 4 0
文章推荐： javascript - 当我的 props 发生变化时，如何在 Svelte 中强制重新渲染？
文章推荐： smartcard - 如何发送包含除 0x9000 之外的返回数据和状态字的响应 APDU？
文章推荐： deployment - Nexus 或 Artifactory 可以存储简单的 tar.gz Artifactory 吗？
文章推荐： javascript - Thymeleaf 模板中 HashMap 的级联下拉列表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com