zoukankan      html  css  js  c++  java
  • SELECT联动

    <html>
     <head>
     <meta charset="utf-8"/>
     <title>test</title>
     <script>
     var data = {    '中国':
                    {       
                             '北京': false,       
                             '上海': false,       
                             '江苏':
                             {           
                                '南京': false,           
                                '苏州': false       
                             },       
                             '浙江':
                             {           
                                '杭州':
                                {               
                                    '西湖区': false,               
                                    '拱墅区': false           
                                },           
                                '宁波': false,           
                                '嘉兴': false       
                              }   
                    },   
                      '美国':
                    {       
                            '华盛顿': false,       
                            '德克萨斯': false   
                    }
                };
     
     
     function change(el, d)
     {   
        d = d || data;   
        while (el.nextSibling)                          //nextSibling可以获取当前dom对象的下一个对象,(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。
        {       
            el.parentNode.removeChild(el.nextSibling);    //childNodes:表示对象的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性;parentNode:表示对象的父级节点。 removeChild删除子节点,xxx.removeChild(obj)   xxx是所删除节点的父节点。
        }   
        var text = el.options[el.selectedIndex].text,    sub = d[text];   
        if (sub)
        {       
            var sel = document.createElement('select');       
            sel.add(new Option('请选择', ''), null); 
            //或者写成sel.options[sel.options.length]=new Option('请选择','');  s.options.length 新创建的节点的成员个数,随着程序不断递增,第一个参数代表option标签包着的字符串,而第二个参数代表option选项的value值。   
            for (var i in sub)
            {           
                sel.add(new Option(i, ''), null);       
            }       
            sel.onchange = function()
            {           
                change(sel, sub);       
            };       
            el.parentNode.appendChild(sel);    //追加一个子节点XXX.appendChild(),XXX代表以哪个节点作为父级节点,
         }   
         document.getElementById('console').innerHTML = text == '请选择' ? '' : text;
     };
     </script>
     </head>
     
     
     <body>
     <div>   
     <select onchange="change(this)">       
     <option>请选择</option>       
     <option>美国</option>       
     <option>中国</option>   
     </select>
     </div>
     <div id="console">
     </div>
     </body>
     </html>

  • 相关阅读:
    小白成长建议(7)-蛛丝马迹-云层
    小白成长建议(5) 缺陷与管理-云层
    小白成长建议(6)-测试的灵魂-云层
    小白成长建议(4) -从头开始-云层
    小白成长建议 (3)-看书和选书-云层
    小白成长建议(2)-扎实基础-云层
    创业神人&当时钢铁侠:Elon Musk
    Oracle数据库学习笔记5
    Oracle数据库学习笔记4
    Oracle数据库学习笔记3
  • 原文地址:https://www.cnblogs.com/futan/p/js_liandong.html
Copyright © 2011-2022 走看看