| 编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 菜单三级联动菜单（1） 【实例描述】 三级联动菜单是常用的一种选择方式，通过这种方式，用户可以更方便地选择数据，同时还能降低选择的失误率。本例学习如何制作三级联动菜单，实现方法是普通事件的捕获。 【实例代码】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-本站（www.xue51.com）</title>
<STYLE>
body { font-size: 11px; font-family:
Verdana;background:#ececec;color:#666666;}
select { font-size: 11px; font-family: Verdana;
vertical-align: middle;margin: 3px;background:#ececec;color:#666666;}
</STYLE>
<div id="myDiv"> </div>
<SCRIPT LANGUAGE="JavaScript" DEFER>
var cMenu = ["上海","北京","深圳","济南"]
var cValue = ["shanghai","beijing","shenzhen","jinan"]
var aMenu = [["杨浦区","徐汇区","黄浦区","浦东新区"],
["丰台区","海淀区"],["福田","宝安"],["市中","历下"]]
var aValue = [["yp","xh","hp","pd"],["ft","hd"],["ft","ba"],["sz","lx"]]
var dMenu = [[["市光新村","工农三村"],["徐汇新村","徐汇高楼"],
["黄浦楼宇","外滩风景"],["浦东地铁","浦东机场"]],[["丰台体育馆","造甲村"],
["亚运村"]],[["莲花山","商报大厦"],["深圳宝安机场","宝安开发区"]],
[["山庄宾馆","山庄大酒店"],["千佛山东门","千佛山医院"]]] var oDiv = document.all.myDiv;
var ocMenu = document.createElement("<SELECT name='city'>");
//创建城市列表框
var oaMenu = document.createElement("<SELECT name='cityArea'>");
//创建区域列表框
var odMenu = document.createElement("<SELECT name='cityAddress'>");
//创建地址列表框
with(oDiv)appendChild(ocMenu),appendChild(oaMenu),appendChild(odMenu);
//将以上三个列表框添加到div中
createMainOptions();
createSubOptions(0);
createSub2Options(0,0); ocMenu.onchange = function() {//绑定城市下拉框的选择事件
createSubOptions(this.selectedIndex);
createSub2Options(this.selectedIndex,oaMenu.selectedIndex);};
oaMenu.onchange = function() {//绑定区域下拉框的选择事件
createSub2Options(ocMenu.selectedIndex,this.selectedIndex);}; function createMainOptions() {
for(var i=0;i<cMenu.length;i++)ocMenu.options[i] =
new Option(cMenu[i],cValue[i]);//填充城市列表框内容
}
function createSubOptions(j) {
with(oaMenu) {
length=0; //填充区域列表框内容
for(var i=0;i<aMenu[j].length;i++)oaMenu.options[i]
= new Option(aMenu[j][i],aValue[j][i]);
}
}
function createSub2Options(j,k) {
with(odMenu) {
length=0;
//填充地址列表框内容
for(var i=0;i<dMenu[j][k].length;i++)
odMenu.options[i] = new Option(dMenu[j][k][i]);
}
}
ocMenu[1].selected=true;
ocMenu.fireEvent("onchange");
</SCRIPT>
</head>
<body>
</body>
</html>
【运行效果】  【难点剖析】 本例中使用数组定义了3个级别下拉框的内容，然后使用“createElement”动态创建了3个下拉框，并使用“appendChild”将下拉框添加到指定的div层中。为了实现联动效果，还动态设置了这3个下拉框的“onchange”事件。 【源码下载】 为了JS代码的准确性，请点击：三级联动菜单 进行本实例源码下载
使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。
| 
