<!DOCTYPE html>

<html>

<head>

    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title> 级联菜单 </title>

    <style type="text/css">

        select {

            font-size: 11pt;

            width:150px;

        }

    </style>

    <script type="text/javascript">

        // 构造2个数组

        var detail_show = [];

        var detail_value = [];

        detail_show[0] = [];

        detail_value[0] = [];

        detail_show[0][0] = '上海';

        detail_value[0][0] = '0101';

        detail_show[0][1] = '北京';

        detail_value[0][1] = '0102';

        detail_show[0][2] = '广州';

        detail_value[0][2] = '0103';

        detail_show[1] = [];

        detail_value[1] = [];

        detail_show[1][0] = '纽约';

        detail_value[1][0] = '0201';

        detail_show[1][1] = '华盛顿';

        detail_value[1][1] = '0202';

        detail_show[1][2] = '加州';

        detail_value[1][2] = '0203';

        detail_show[2] = [];

        detail_value[2] = [];

        detail_show[2][0] = '伦敦';

        detail_value[2][0] = '0301';

        detail_show[2][1] = '利物浦';

        detail_value[2][1] = '0302';

        detail_show[2][2] = '伯明翰';

        detail_value[2][2] = '0303';

        function change(target){

            // 获取级联的下拉列表

            var deselect = document.getElementById("deselect");

            // 清空第二个下拉列表的选项

            deselect.innerHTML = null;

            var m = target.selectedIndex;

            if ( m >= 0 ) {

                for(i = 0; i < detail_show[m].length; i++){

                    // 循环构造很多option,然后放在指定的option中

                    // new Option(show,value)可以构造一个一个的option

                     deselect.options[i] = new Option(detail_show[m][i], detail_value[m][i]);

                }

                // 设置默认选中第一个列表项

                deselect.options[0].selected = true;

            }

        }

    </script>

</head>

<body>

<div align="center">

<h2>级联菜单</h2>

<form id="crazyitform">

    <select name="caselect" id="caselect" onchange="change(this)";>

        <option value="01">中国</option>

        <option value="02">美国</option>

        <option value="03">英国</option>

    </select>

    <select name="deselect" id="deselect">

    </select>

</form>

</div>

</body>

</html>

<!--

当数据量大的时候，就被撑爆了，所以这种级联，最好使用AJAX，也就是下一级变动是从数据库中查询得到的，而不是一开始就已经在页面中的

 -->

　　

JavaScript实现级联下拉框的更多相关文章

  1. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  2. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

  3. JQuery和ASP.NET分别实现级联下拉框效果

    在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...

  4. js基于json的级联下拉框

    级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. /** * @author sun ...

  5. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  6. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  7. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  8. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. EXCEL（1）级联下拉框

    EXCEL级联下拉框 http://jingyan.baidu.com/article/3c343ff756e0cf0d377963f9.html 在输入一些多级项目时,如果输入前一级内容后,能够自动 ...

随机推荐

  1. jQuery源码分析-02正则表达式-RegExp-常用正则表达式

    2.4 常用正则表达式在网上找到一篇广为流传的文章<常用正则表达式>,逐一分析,不足地方进行补充和纠正. 常用的数字正则(严格匹配) 正则 含义 ^[1-9]\d*$ 匹配正整数 ^-[1 ...

  2. 实践GTD三周年后的体会

    从2011年7月开始实践GTD到现在已经3年多了,按照年初设定的目标,应该写点GTD的体会,但提起笔来的时候却发现并没有什么太新的体会,大部分体会都已经在以前的文章中写到了,甚至有些流程已经简化了,看 ...

  3. CSS ID选择器(三)

    一.ID选择器 ID选择器使用"#"前缀标识符进行标识,后面紧跟指定的元素的ID名称. 如 #box{ width:100px; height:100px;} 元素的ID名称是唯一 ...

  4. Atitit。 《吠陀》 《梨俱吠陀》overview 经读后感  是印度上古时期一些文献的总称

    Atitit. <吠陀> <梨俱吠陀>overview 经读后感  是印度上古时期一些文献的总称 1. 印度古<吠陀>经,是印度上古时期一些文献的总称, 1 1.1 ...

  5. 一个人的Scrum之准备工作

    在2012年里,我想自己一人去实践一下Scrum,所以才有了这么一个开篇. 最近看了<轻松的Scrum之旅>这本书,感觉对我非常有益.书中像讲述故事一样描述了在执行Scrum过程中的点点滴 ...

  6. 【UXPA工作坊小记】郎学明：做更“有用”的用户研究

    xueminglang@google.com 本来做了一些笔记,但郎老师后来发了相关教材.内容比现场PPT详细的多.由于,本人在网上也没有搜索到相关文章,还是决定做一回码字工,稍作精简后分享给大家. ...

  7. mac:ssh登陆总是需要输入钥匙串密码解决

    方法1: finder -> 左上角:前往->按住option建->多出一个资源->KeyChains->第一个文件夹(删除掉次文件夹) 然后重启即可 方法2: ssh- ...

  8. 命令行方式使用abator.jar生成ibatis相关代码和sql语句xml文件

    最近接手一个老项目,使用的是数据库是sql server 2008,框架是springmvc + spring + ibatis,老项目是使用abator插件生成的相关代码,现在需要增加新功能,要添加 ...

  9. Redis的数据类型及操作

    Strings 最简单的类型,一个Key对应一个Value,string类型是二进制安全的.Redis的string可以包含任何数据,如图片或序列化的对象 操作 Set:设置key对应的值为strin ...

  10. HTML5 datalist 标签

    以前需要用JS写一个自动完成组件(Suggest),很费劲.HTML5时代则不用了,直接使用datalist标签,直接减少了工作量.如下 <!DOCTYPE html> <html& ...