A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 张龙欢 中级黑马   /  2013-6-7 02:41  /  1756 人查看  /  12 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 张龙欢 于 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;

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

  14. generateYear();
  15. generateMonth();
  16. }

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

  26. function generateMonth() {
  27. for (var x = 1; x <= 12; x++) {
  28. var option = document.createElement("option");
  29. option.innerHTML = x;
  30. option.value = x;
  31. monthSelect.appendChild(option);
  32. }
  33. }

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

  36. var year = yearSelect.value;
  37. var month = monthSelect.value;
  38. if (year == "" || month == "")
  39. return;

  40. var days = 30;
  41. if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12)
  42. days = 31;
  43. else if (month == 2)
  44. days = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28;

  45. for (var x = 1; x <= days; x++) {
  46. var option = document.createElement("option");
  47. option.innerHTML = x;
  48. option.value = x;
  49. dateSelect.appendChild(option);
  50. }
  51. }
  52. </script>
  53. </head>
  54. <body>
  55. <select id="yearSelect" onchange="generateDate();"><option value="">-请选择年份-</option></select>
  56. <select id="monthSelect" onchange="generateDate();"><option value="">-请选择月份-</option></select>
  57. <select id="dateSelect"><option>-请选择日期-</option></select>
  58. </body>
  59. </html>
复制代码
这是我做的一个级联选择日期,自己检查了代码几遍了,自己感觉不到问题的所在,可就是实现不了级联,真是虐心,
它到底哪除了问题?

评分

参与人数 1技术分 +1 收起 理由
袁梦希 + 1 很给力!

查看全部评分

12 个回复

倒序浏览
哈哈  你分数咋还没够呢  赶紧努力啊
回复 使用道具 举报
你问的问题一般人都不会    唉
回复 使用道具 举报
<!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>


//看下这个吧,老师写的,希望能帮到你  

评分

参与人数 1技术分 +1 收起 理由
袁梦希 + 1 很给力!

查看全部评分

回复 使用道具 举报
大哥,你的代码哪里有问题呀?  你这样我就要虐心了
我测试的是可以级联的l,你用的是什么浏览器?
回复 使用道具 举报
shiweiCao 发表于 2013-6-9 16:11
大哥,你的代码哪里有问题呀?  你这样我就要虐心了
我测试的是可以级联的l,你用的是什么浏览器?  ...

哈哈哈   我也找不到问题  
回复 使用道具 举报
楼主你好  如果问题已经解决  请把帖子的类型改为已解决  然后会给你发几个粽子吃
回复 使用道具 举报
袁梦希 发表于 2013-6-12 18:59
楼主你好  如果问题已经解决  请把帖子的类型改为已解决  然后会给你发几个粽子吃 ...

不好意思梦溪,让你操心了!:)
回复 使用道具 举报
shiweiCao 发表于 2013-6-9 16:11
大哥,你的代码哪里有问题呀?  你这样我就要虐心了
我测试的是可以级联的l,你用的是什么浏览器?  ...

我用的是IE8代的浏览器,:'(
回复 使用道具 举报
袁梦希 发表于 2013-6-12 18:59
哈哈哈   我也找不到问题

呵呵, 我不放心还专门查了几个闰年来试了下...
回复 使用道具 举报
张龙欢 发表于 2013-6-12 19:56
我用的是IE8代的浏览器,

呵呵,你应该纠结坏了.
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马