使用JavaScript更改HTML select元素中的選項

Question

我希望用戶使用三個選擇菜單輸入他們的生日。 當用戶輸入其出生月份時，“天”菜單中的選項應更改為適合該月（1月為31天，4月為30天）。 我目前的解決方案是使用分離數組的“for”循環創建新的預定義選項元素。 目前，當我從下拉菜單中選擇“1月”時，網頁沒有變化。

<script type = "text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == 'january'{
var optionArray = ["|", "1|1", "2|2", "3|3", "4|4", "5|5", "6|6", "7|7", "8|8", "9|9", "10|10","11|11", "12|12", "13|13", "14|14", "15|15", "16|16", "17|17", "18|18", "19|19", "20|20", "21|21", "22|22", "23|23", "24|24", "25|25", "26|26", "27|27", "28|28", "29|29","30|30", "31|31"];
}else{
}
for(option in optionArray){
var pair = 'optionArray.split['|'];
var newOption = dcoument.createElement('option');
newOption.value = pair[0];
newOption.innerHTML = pair[1]; 
s2.options.add(newOption);
}
</script>
</head>
<body>
Date of Birth<select id = 'slct1' name = 'slct1' 
onchange="populate(this.id,'slct2')">
                <option value = ""></option>
                <option value = 'january'>January</option>
<select id = 'slct2' name='slct2'></select>

我不確定從這里去哪里，任何幫助將不勝感激！

Answer 1

這是解決您問題的簡單方法。 我改變了一點代碼。 該解決方案使用純JavaScript。 聲明函數后，我剛剛運行了初始化函數。 為此，必須存在第二個選擇標記。 因此，請確保將腳本放在body標記的末尾。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> Date of Birth<select id='slct1' name='slct1' onchange="populate()"> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> <select id='slct2' name='slct2'></select> <script type="text/javascript"> var daysInMonth = { "January": 31, "February": 28, "March": 31, "April": 30, "May": 31, "June": 30, "July": 31, "August": 31, "September": 30, "October": 31, "November": 30, "December": 31 }; function populate() { var s1 = document.getElementById('slct1'); var s2 = document.getElementById('slct2'); s2.innerHTML = ""; for (var i = 0; i < daysInMonth[s1.value]; i++) { var option = document.createElement("option"); option.text = i + 1; s2.add(option); } } populate(); // init </script> </body> </html>

使用JavaScript更改HTML select元素中的選項

問題描述

1 個解決方案

解決方案1
0 已采納 2019-03-18 05:49:14

使用JavaScript更改HTML select元素中的選項

問題描述

1 個解決方案

解決方案1 0 已采納 2019-03-18 05:49:14

解決方案1
0 已采納 2019-03-18 05:49:14