JavaScript基础 简单的二级联动下拉列表

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script type="text/javascript">
        //这个 请选择 选项 加的很好。
        var jiaArr = ["请选择","儒家", "佛家", "道家"];
        var exampleArr = [
                ["请选择"],
                ["孔子", "论语", "三字经"],
                ["释迦牟尼", "金刚经", "楞严经"],
                ["老子", "庄子", "北斗经"]
        ];
        window.onload = function () {

            var selJia = document.getElementById("jia");
            //申请空间
            selJia.length = jiaArr.length;
            //添加元素
            for (var i = 0; i < jiaArr.length; i++) {
                selJia.options[i].text = jiaArr[i];
                selJia.options[i].value = jiaArr[i];
            }
        }

        function ChangeExampleSelect(index)
        {
            var selExa = document.getElementById("example");

            selExa.length = exampleArr[index].length;

            for (var i = 0; i < exampleArr[index].length; i++)
            {
                selExa.options[i].text = exampleArr[index][i];
                selExa.options[i].value = exampleArr[index][i];
            }
        }
    </script>
</head>
<body>
    <select id="jia" onchange="ChangeExampleSelect(this.selectedIndex)">

    </select>
    <select id="example">

    </select>
</body>
</html>

result:

  初始状态,

  第一个列表进行选择,

  联动,

事物之间是有联系的。

——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。IDE: VS2015;浏览器: Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方,请留下评论,我会认真思考的。

注:我是一位正在努力的普通人,此文仅供测试与参考使用,不可做其他用途。当参考博文内容时,代表您已接受使用条款。

时间: 2024-11-03 22:06:15

JavaScript基础 简单的二级联动下拉列表的相关文章

JavaScript基础--简单功能的计算器(十一)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

2016-07-05 JavaScript实现省份城市二级联动

简介:利用JavaScript实现省份城市二级联动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><meta charset="UTF-8"><title>New Document </title><script language="JavaScript" type=&

(转)JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动

JavaScript html js 地区二级联动,省市二级联动,省市县js+xml三级联动 原文链接:http://heisetoufa.iteye.com/blog/353974 比较好的二级联动: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE>

利用JS实现一个简单的二级联动菜单

前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JS实现二级联动菜单</title> 6 </head> 7 <body> 8 <form name="form1"

简单得二级联动

<!--/*--><!--* Created by sincere丶胡(weibo) on 2017/6/28.--><!--*/--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>yadi</title> <meta name="viewport&quo

通同select便签实现简单的二级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jq实现简单的二级联动下拉框

1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati

JavaScript 数组 二级联动下拉列表

---恢复内容开始--- <select id = "a1" onchange = "addOption()"></select> <select id = "a2"></select> <script type = "text/javascript"> var city = new Array; city['江苏'] = ['南京','上海', '连云港', '苏州

一个简单的二级联动效果,看完之后立马你也可以写一个(有源码,纯js,带注释)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择</title> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1