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

Question

I am trying to add options into a select menu using javascript for a HTML page, but my code does not seem to want to run.我正在尝试使用 javascript 为 HTML 页面将选项添加到 select 菜单中，但我的代码似乎不想运行。 I've been running in loops for the last few hours trying to figure this out now, but have run out of ideas.在过去的几个小时里，我一直在循环运行，试图弄清楚这一点，但已经没有想法了。

For this assignment I can NOT edit the Select HTML tag and must use only javascript to create this list of options.对于这个作业，我不能编辑 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>

My current code does not add anything to the tag some reason, and I am still a novice at Javascript.由于某种原因，我当前的代码没有向标签添加任何内容，而且我仍然是 Javascript 的新手。 Can someone help me figure this out?有人可以帮我解决这个问题吗？

Answer 1

Your script looks good.你的脚本看起来不错。 The problem is that it gets executed before the browser knows that there is a select element.问题是它在浏览器知道有一个select元素之前就被执行了。 The browser reads the content of your webpage from top to bottom.浏览器从上到下读取您网页的内容。

When you execute let monthNode = document.getElementById("month");当你执行let monthNode = document.getElementById("month"); before the browser knows that there is an element with the id="month" it will return null .在浏览器知道有一个id="month"的元素之前，它将返回null 。

The solution is easy.解决方案很简单。 Move the entire <script> tag right before the closing </body> tag将整个<script>标签移动到结束</body>标签之前

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

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

问题描述

1 个解决方案

解决方案1
1 2019-10-26 07:08:48

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

问题描述

1 个解决方案

解决方案1 1 2019-10-26 07:08:48

解决方案1
1 2019-10-26 07:08:48