下拉列表级联

作者: 高正杰 | 来源:发表于2017-12-24 14:46 被阅读8次
<script type="text/javascript">  
    function selcity(){  
        var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"],  
                   ["长沙","郴州","岳阳","株洲"],["广州","深圳","惠州","东莞"]];  
        var index = document.getElementById("selID").selectedIndex;  
        var subNode = document.getElementById("subID");  
        var citys = arr[index];        
          
        subNode.options.length = 0;   //清空之前选项  
        for(var x=0;x<citys.length;x++){  
            var optNode = document.createElement("option");  
            optNode.innerText = citys[x];  
            subNode.appendChild(optNode);  //选择添加到子选项中  
        }  
    }  
</script>  
<style type="text/css">   
      
</style>  
</head>  
<body>  
    <select id="selID" onchange="selcity()">  
        <option>--选择省市--</option>  
        <option>北京</option>  
        <option>山东</option>  
        <option>湖南</option>  
        <option>广东</option>  
    </select>  
      
    <select id="subID">  
        <option>--选择城市--</option>  
    </select>  
</body>


该文章于2017年8月7日于CSDN上首次发表,2017年12月24日搬家至此!

相关文章

  • 下拉列表级联

    附该文章于2017年8月7日于CSDN上首次发表,2017年12月24日搬家至此!

  • angular 一个controller影响另一个control

    在做门户页面的时候,有一个切换租户的下拉列表,有一个切换应用系统的下拉列表。 现在需要做级联,当切换租户的同时,让...

  • 联级菜单

    jquery下拉联级菜单 解析使用采用jQuery利用class作为识别符,将级联下拉列表框选出来。当选项发生变化...

  • JavaScript03

    今日主要内容 DOM节点的增删改查与级联下拉列表实现 BOM与window对象 location对象 两种定时器 ...

  • 类似select下拉框,鼠标点击元素以外隐藏下拉框(阻止冒泡事件

    实现效果: 1.点击按钮展开下拉列表2.点击下拉列表中的选项进行选择3.点击除下拉列表外的body,收起下拉列表 ...

  • WINFORM Combox下拉框级联

    已省、市下拉框级联关系作为例子

  • 解决blur与click冲突

    背景 在开发下拉选择(picker)组件中遇到,点击输入框出现下拉列表,再点击下拉列表选项后下拉列表自动收缩,然而...

  • jQuery插件CascadingDropDownList

    之前的项目需要实现多级联动的下拉列表选择控件,网上找了许久,没发现有太多符合需求的实现,所以自己造了个轮子,并命名...

  • combotree(树形下拉框)

    含义 树形下拉框结合选择控件和下拉树控件。它与combobox(下拉列表框)类似,但是将下拉列表框的列表替换成了树...

  • h5级联下拉、分类筛选

    级联下拉列表框这种常见的需求,相信大家都经常遇到,下面两种写法都曾运用在项目,测试是没问题,但代码可能不是最好的,...

网友评论

    本文标题:下拉列表级联

    本文链接:https://www.haomeiwen.com/subject/wukhgxtx.html