[英]How do I create HTML select menu options using javascript
我正在嘗試使用 javascript 為 HTML 頁面將選項添加到 select 菜單中，但我的代碼似乎不想運行。 在過去的幾個小時里，我一直在循環運行，試圖弄清楚這一點，但已經沒有想法了。
對於這個作業，我不能編輯 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 &: 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 §11-15 and HRS §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 §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>
如何在Selenium中使用Javascript在html select中獲取選項列表？
[英]How do I get a list of options in an html select using Javascript in Selenium?
如何限制HTML Select元素下拉菜單中顯示的選項數量？
[英]How do I limit the number of options displayed in an HTML Select element dropdown menu?
如何在外部文件中創建選擇菜單並將其嵌入html中以顯示菜單
[英]How do I create select menu in an external file and embed it in html to show the menu
如何使用JavaScript將選擇菜單選項添加到多個選擇中
[英]How to add select menu options to multiple selects using javascript
我如何 select 一個匹配的 html 元素不是使用 javascript 的事件？
[英]How do I select a matching html element that is not the event using javascript?
如何使用JavaScript動態插入PHP“生成”選項（html選擇）？
[英]How to insert PHP 'generated' options (html select) dynamically using JavaScript?
如何使用JavaScript防止HTML元素選擇選項中的沖突
[英]How to prevent conflict in HTML element select options using Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.