使用Javascript的下拉列表
[英]Dropdown list using Javascript
問題描述
如何僅使用JS創建下拉列表？ 示例我有我的HTML，我知道對於HTML的下拉列表，您可以使用select和option標記，但是如果我不更改任何HTML元素，而僅使用Javascript並鏈接其中的html，則可以使用JS創建Day-Month-Year一年的下拉列表，該怎么做？
我的HTML：
<!doctype html>
<html lang="en">
<head>
<title> Testing for JS Dropdown</title>
<style>
div {
width: 50%;
margin: auto;
height: 200px;
border: 5px solid black;
background-color: silver;
}
.field {
padding-left: 10px;
width: 60px;
display: inline-block;
}
h2 { padding-left: 10px;}
</style>
<meta charset="utf-8">
<script src="prototype.js"></script>
<script src="JStester.js"></script>
</head>
<body>
<div>
<h2> Select Day-Month-Year </h2>
<p> <span class="field">Day </span><select id="days"> </select></p>
<p> <span class="field">Month</span><select id="months"> </select></p>
<p> <span class="field">Year</span><select id="years"></select></p>
</div>
</body>
</html>
2 個解決方案
解決方案1
1 2018-11-05 07:21:07
嘗試這個..
$(document).ready(function() { const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var qntYears = 4; var selectYear = $("#years"); var selectMonth = $("#months"); var selectDay = $("#days"); var currentYear = new Date().getFullYear(); for (var y = 0; y < qntYears; y++){ let date = new Date(currentYear); var yearElem = document.createElement("option"); yearElem.value = currentYear yearElem.textContent = currentYear; selectYear.append(yearElem); currentYear--; } for (var m = 0; m < 12; m++){ let monthNum = new Date(2018, m).getMonth() let month = monthNames[monthNum]; var monthElem = document.createElement("option"); monthElem.value = monthNum; monthElem.textContent = month; selectMonth.append(monthElem); } var d = new Date(); var month = d.getMonth(); var year = d.getFullYear(); var day = d.getDate(); selectYear.val(year); selectYear.on("change", AdjustDays); selectMonth.val(month); selectMonth.on("change", AdjustDays); AdjustDays(); selectDay.val(day) function AdjustDays(){ var year = selectYear.val(); var month = parseInt(selectMonth.val()) + 1; selectDay.empty(); //get the last day, so the number of days in that month var days = new Date(year, month, 0).getDate(); //lets create the days of that month for (var d = 1; d <= days; d++){ var dayElem = document.createElement("option"); dayElem.value = d; dayElem.textContent = d; selectDay.append(dayElem); } } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <title> Testing for JS Dropdown</title> <style> div { width: 50%; margin: auto; height: 200px; border: 5px solid black; background-color: silver; } .field { padding-left: 10px; width: 60px; display: inline-block; } h2 { padding-left: 10px;} </style> <meta charset="utf-8"> <script src="prototype.js"></script> <script src="JStester.js"></script> </head> <body> <div> <h2> Select Day-Month-Year </h2> <p> <span class="field">Day </span><select id="days"> </select></p> <p> <span class="field">Month</span><select id="months"> </select></p> <p> <span class="field">Year</span><select id="years"></select></p> </div> </body> </html>
解決方案2
1 2018-11-05 07:21:57
僅使用JAVASCRIPT嘗試此操作
<!doctype html> <html lang="en"> <head> <title> Testing for JS Dropdown</title> <script type="text/javascript"> var dt_obj= new Date(); function addOption(selectbox,text,value ) { var optn = document.createElement("OPTION"); optn.text = text; optn.value = value; selectbox.options.add(optn); } ///////////// date ////////////////// var today_date= dt_obj.getDate(); function addOption_list1(){ var month = dt_obj.getMonth(); month = month + 1; if(month == "1" || month == "3" || month == "5" || month == "7" || month == "8" || month == "10" || month == "12"){ for (var i=1; i < 32;++i){ addOption(document.drop_list.days, i, i); if(i== today_date){document.drop_list.days.options[i].selected=true;} } } else if ( month == "2"){ for (var i=1; i < 29;++i){ addOption(document.drop_list.days, i, i); if(i== today_date){document.drop_list.days.options[i].selected=true;} } } else{ for (var i=1; i < 31;++i){ addOption(document.drop_list.days, i, i); if(i== today_date){document.drop_list.days.options[i].selected=true;} } } addOption_list2(); } //////////////End of Date ////////// ///////////// Month ////////////////// var current_month=dt_obj.getMonth() +1; function addOption_list2(){ var month = new Array("January","February","March","April","May","June","July","August","September","October","November","December"); for (var i=0; i < month.length;++i){ addOption(document.drop_list.months, month[i], month[i]); if(i== current_month){document.drop_list.months.options[i].selected=true;} } addOption_list3(); } //////////////End of Month ////////// ///////////// Year ////////////////// var current_year=dt_obj.getFullYear(); function addOption_list3(){ for (var i=0; i < 7;++i){ var j=current_year+i-2; match_year=current_year+i; addOption(document.drop_list.years, j, j); if((j-1)== current_year ){document.drop_list.years.options[i].selected=true;} } } //////////////End of Year ////////// function monthChange(){ var month = document.getElementById("months").value; document.getElementById("days").value =""; if(month == "January" || month == "March" || month == "May" || month == "July" || month == "August" || month == "October" || month == "December"){ for (var i=1; i < 32;++i){ addOption(document.drop_list.days, i, i); if(i== today_date){document.drop_list.days.options[i].selected=true;} } } else if ( month == "February"){ for (var i=1; i < 29;++i){ addOption(document.drop_list.days, i, i); if(i== today_date){document.drop_list.days.options[i].selected=true;} } } else{ for (var i=1; i < 31;++i){ addOption(document.drop_list.days, i, i); if(i== today_date){document.drop_list.days.options[i].selected=true;} } } } </script> <style> div { width: 50%; margin: auto; height: 200px; border: 5px solid black; background-color: silver; } .field { padding-left: 10px; width: 60px; display: inline-block; } h2 { padding-left: 10px;} </style> <meta charset="utf-8"> <script src="prototype.js"></script> <script src="JStester.js"></script> </head> <body onload=addOption_list1();> <form name="drop_list"> <div> <h2> Select Day-Month-Year </h2> <p> <span class="field">Day </span><select id="days" name="days"> <option value="" >Date</option></select></p> <p> <span class="field">Month</span><select id="months" name="months" onchange="monthChange()"> <option value="" >Month</option></select></p> <p> <span class="field">Year</span><select name="years"> <option value="" >Year</option> </select></p> </div> </form> </body> </html>
使用下拉列表的 Javascript 計算
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.