黑马程序员技术交流社区

标题: JavaScript做级联日期 [打印本页]
作者: 张龙欢    时间: 2013-6-7 02:41
标题: JavaScript做级联日期
本帖最后由 张龙欢 于 2013-6-12 19:53 编辑
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
  5. <title>级联选择日期</title>
  6. <script type="text/javascript">
  7. var yearSelect;
  8. var monthSelect;
  9. var dateSelect;

  11. onload = function() {
  12. yearSelect = document.getElementById("yearSelect");
  13. monthSelect = document.getElementById("monthSelect");
  14. dateSelect = document.getElementById("dateSelect");

  16. generateYear();
  17. generateMonth();
  18. }

  20. function generateYear() {
  21. var year = new Date().getFullYear();
  22. for (var x = year; x >= year - 200; x--) {
  23. var option = document.createElement("option");
  24. option.innerHTML = x;
  25. option.value = x;
  26. yearSelect.appendChild(option);
  27. }
  28. }

  30. function generateMonth() {
  31. for (var x = 1; x <= 12; x++) {
  32. var option = document.createElement("option");
  33. option.innerHTML = x;
  34. option.value = x;
  35. monthSelect.appendChild(option);
  36. }
  37. }

  39. function generateDate() {
  40. dateSelect.options.length = 1; // 直接改变数组长度, 后面的元素全部删除

  42. var year = yearSelect.value;
  43. var month = monthSelect.value;
  44. if (year == "" || month == "")
  45. return;

  47. var days = 30;
  48. if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
  49. days = 31;
  50. else if (month == 2)
  51. days = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28;

  53. for (var x = 1; x <= days; x++) {
  54. var option = document.createElement("option");
  55. option.innerHTML = x;
  56. option.value = x;
  57. dateSelect.appendChild(option);
  58. }
  59. }
  60. </script>
  61. </head>
  62. <body>
  63. <select id="yearSelect" onchange="generateDate();"><option value="">-请选择年份-</option></select>
  64. <select id="monthSelect" onchange="generateDate();"><option value="">-请选择月份-</option></select>
  65. <select id="dateSelect"><option>-请选择日期-</option></select>
  66. </body>
  67. </html>
复制代码
这是我做的一个级联选择日期，自己检查了代码几遍了，自己感觉不到问题的所在，可就是实现不了级联，真是虐心，
它到底哪除了问题？
作者: 袁梦希    时间: 2013-6-9 15:29
哈哈  你分数咋还没够呢  赶紧努力啊
作者: 袁梦希    时间: 2013-6-9 15:29
你问的问题一般人都不会    唉
作者: shiweiCao    时间: 2013-6-9 16:04
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>级联选择日期</title>
                <script type="text/javascript">
                        onload = function() {        // 页面加载后就生成年和月
                                generateYear();
                                generateMonth();
                        }
                       
                        function generateYear() {
                                var yearSelect = document.getElementById("yearSelect");       
                                var currentYear = new Date().getFullYear();
                                for (var x = currentYear; x >= currentYear - 200; x--) {                                        
                                        var option = document.createElement("option");
                                        option.innerHTML = x;
                                        option.value = x;
                                        yearSelect.appendChild(option);                                               
                                }
                        }
                       
                        function generateMonth() {
                                var monthSelect = document.getElementById("monthSelect");        // 获取到月份的下拉列表
                                for (var x = 1; x <= 12; x++) {                                                         // 循环12次
                                        var option = document.createElement("option");
                                        option.innerHTML = x;
                                        option.value = x;
                                        monthSelect.appendChild(option);                                                // 每次创建一个option添加到下拉列表中
                                }
                        }
                       
                        function generateDate() {                // 如果选了年和月, 就生成日期
                                var dateSelect = document.getElementById("dateSelect");                // 获取日期下拉列表
                                var optionArr = dateSelect.options;                                                        // 获取所有子级option, 类似dateSelect.childNodes, 但不包含Text                                               
                                optionArr.length = 1;                                                                                // 修改数组的长度, 多余的会被删掉
                                /*
                                for (var x = 1; x < optionArr.length; x++)                                        // 循环遍历
                                        dateSelect.removeChild(optionArr[x--]);                                        // 删除每一个
                                */
                       
                                var year = document.getElementById("yearSelect").value;
                                var month = document.getElementById("monthSelect").value;
                                if (year == "" || month == "")
                                        return;
                               
                                var days;
                                if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
                                        days = 31;                // 1,3,5,7,8,10,12月份是31天
                                else if (month == 2)
                                        days = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28;                // 判断是否闰年
                                else
                                        days = 30;                // 其他月份是30天
                       
                               
                                for (var x = 1; x <= days; x++) {                                        
                                        var option = document.createElement("option");
                                        option.innerHTML = x;
                                        option.value = x;
                                        dateSelect.appendChild(option);                                               
                                }
                        }
                </script>
    </head>
    <body>
        <select id="yearSelect" onchange="generateDate();"><option value="">-请选择年份-</option></select>  
        <select id="monthSelect" onchange="generateDate();"><option value="">-请选择月份-</option></select>
        <select id="dateSelect"><option value="">-请选择日期-</option></select>
    </body>
</html>


//看下这个吧,老师写的,希望能帮到你  
作者: shiweiCao    时间: 2013-6-9 16:11
大哥,你的代码哪里有问题呀?  你这样我就要虐心了
我测试的是可以级联的l,你用的是什么浏览器?
作者: 袁梦希    时间: 2013-6-12 18:59
shiweiCao 发表于 2013-6-9 16:11
大哥,你的代码哪里有问题呀?  你这样我就要虐心了
我测试的是可以级联的l,你用的是什么浏览器?  ...

哈哈哈   我也找不到问题  
作者: 袁梦希    时间: 2013-6-12 18:59
楼主你好  如果问题已经解决  请把帖子的类型改为已解决  然后会给你发几个粽子吃
作者: 张龙欢    时间: 2013-6-12 19:54
袁梦希 发表于 2013-6-12 18:59
楼主你好  如果问题已经解决  请把帖子的类型改为已解决  然后会给你发几个粽子吃 ...

不好意思梦溪，让你操心了！:)
作者: 张龙欢    时间: 2013-6-12 19:56
shiweiCao 发表于 2013-6-9 16:11
大哥,你的代码哪里有问题呀?  你这样我就要虐心了
我测试的是可以级联的l,你用的是什么浏览器?  ...

我用的是IE8代的浏览器，:'(
作者: shiweiCao    时间: 2013-6-14 01:52
袁梦希 发表于 2013-6-12 18:59
哈哈哈   我也找不到问题

呵呵, 我不放心还专门查了几个闰年来试了下...
作者: shiweiCao    时间: 2013-6-14 01:53
张龙欢 发表于 2013-6-12 19:56
我用的是IE8代的浏览器，

呵呵,你应该纠结坏了.



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2