<!doctype html>
<html>
<head>
<title></title>
<meta charset = "utf-8"/>
</head>
<style>
</style>
<body>
<select id="one">
<option value="">请选择省份</option>
</select>
<select id="two">
<option value="">请选择城市</option>
</select>
<select id="three">
<option value="">请选择区域</option>
</select>
<script type="text/javascript" src="js/jquery-1.12.0.js"></script>
<script type="text/javascript">
/*
1.搭建框架
2.给省份和城市绑定change事件
*/
$(function(){
var province = [
{"name" : "广东省" ,
"city" : [
{
"name" : "广州市" ,
"area" : ["越秀区","荔湾区","海珠区","天河区,白云区"]
},
{
"name" : "深圳市" ,
"area" : ["福田区","罗湖区","南山区","宝安区","龙岗区"]
}
]
},
{"name" : "浙江省" ,
"city" : [
{
"name" : "杭州市" ,
"area" : ["上城区","下城区","江干区","西湖区"]
},
{
"name" : "丽水" ,
"area" : ["莲都区","松阳县","遂昌县","云和县"]
}
]
},
{"name" : "江西省" ,
"city" : [
{
"name" : "南昌市" ,
"area" : ["东湖区","西湖区","青云谱区","湾里区"]
},
{
"name" : "九江市" ,
"area" : ["浔阳区","庐山区","瑞昌市","九江县"]
},
{
"name" : "赣州市" ,
"area" : ["章贡区","南康区","上犹县","赣县"]
}
]
},
]
// 二级联动
$("#two").change(function(){
var one_index = $("#one option:selected").index()
var two_index = $("#two option:selected").index()
var three = $("#three")
three.empty().append("<option>请选择区域</option>")
if(two_index > 0){
var area = province[one_index-1].city[two_index-1].area
for(var i = 0 i < area.length i++){
three.append("<option>"+area[i]+"</option>")
}
}
})
// 一级联动
$("#one").change(function(){
var one_index = $("#one option:selected").index()
var two = $("#two")
console.log(one_index)
two.empty().append("<option>请选择城市</option>")
$("#three").empty().append("<option>请选择区域</option>")//清除
if(one_index > 0){
var city = province[one_index-1].city
console.log(province[one_index-1].city)
for(var i = 0 i < city.length i++){
two.append("<option>"+city[i].name+"</option>")
}
}
})
init()
function init(){
for(var i = 0 i < province.length i++){
$("#one").append("<option>"+province[i].name+"</option>")
}
}
})
</script>
</body>
</html>
对于一个多条件的查询，我们希望在选择了一个菜单项后，另外一个下拉菜单能够根据我们所选择的第一个菜单项显示其所有子菜单项。这就是本文提到的级联菜单问题。级联菜单实现的方法有很多，本文根据笔者所做的一个小实验，简单的介绍一下如何通过XML来实现级联菜单的功能。
首先要定义一个XML文件，用以存放级联菜单的信息，我们命名为query.xml，其代码如下：
<?xml version="1.0" encoding="gb2312"?>
<info>
<course>
<text>软件工程</text>
<value>1</value>
</course>
<course>
<text>数据结构</text>
<value>2</value>
</course>
<course>
<text>操作系统</text>
<value>3</value>
</course>
<course>
<text>计算机组成原理</text>
<value>4</value>
</course>
<teacher>
<text>张老师</text>
<value>1</value>
</teacher>
<teacher>
<text>李老师</text>
<value>2</value>
</teacher>
<teacher>
<text>刘老师</text>
<value>3</value>
</teacher>
<teacher>
<text>王老师</text>
<value>4</value>
</teacher>
<class>
<text>一班</text>
<value>1</value>
</class>
<class>
<text>二班</text>
<value>2</value>
</class>
<class>
<text>三班</text>
<value>3</value>
</class>
<class>
<text>四班</text>
<value>4</value>
</class>
</info>
然后再创建一个HTML文件，命名为query.html
在query.html里，首先创建一个表单
<form id="queryForm">
<select id="keyword" name="keyword" onChange="showDetail()">
<option value="default">default</option>
<option value="1">课程</option>
<option value="2">教师</option>
<option value="3">班级</option>
</select>
<select id="content" name="content" onChange="showValue()">
<option value="default">default</option>
</select>
</form>
从上面的代码可以看出，当我们选择第一级菜单时，会触发showDetail方法，这是通过JavaScript来实现的，因此我们还需要定义一个showDetail方法，其实现代码如下：
function showDetail(){
var document_xml = new ActiveXObject("Microsoft.XMLDOM")
document_xml.load("query.xml")//加载info.xml
var RootNode = document_xml.documentElement//获得info.xml文档的根节点
var keyword = document.getElementByIdx("keyword").value
var details//用以存放二级菜单内容，是一个数组对象
var content = document.getElementByIdx("content")
content.options.length = 0//先清空
if(keyword=="default"){
var option = new Option("default","default")
content.add(option)
}else{
if(keyword=="1"){
details = document_xml.getElementsByTagName_r("course")
}else if(keyword=="2"){
details = document_xml.getElementsByTagName_r("teacher")
}else if(keyword=="3"){
details = document_xml.getElementsByTagName_r("class")
}
for(var i=0i<details.lengthi++){
var xText = details[i].childNodes[0].firstChild.nodeValue//获取文本
var xValue = details[i].childNodes[1].firstChild.nodeValue//获取文本以应的值
var option = new Option(xText,xValue)
content.add(option)
}
}
}
从上面的代码可以看出，showDetail方法会根据一级菜单选项的不同显示对应的子菜单。这里涉及到通过JavaScript来读取xml文件的操作，可以参见源码的注释部分，记得结合xml文件里的内容一起看哦。
二级菜单显示出来之后，我们就可以进行选择了，选择之后，会调用showValue方法，把选到的子菜单项的value和text显示出来。showValue的定义如下：
function showValue(){
var content= document.getElementByIdx("content")
var contentText = content.options[content.selectedIndex].text//获取text值
var contentValue = document.getElementByIdx("content").value//获取文本
alert(contentValue+" "+contentText)
}
在这个方法里，要注意option当中text值的获取，它与select表单域的value的获取方式不大一样，详见代码及其注释。
把两个方法封装在<head></head>之间，记得要写上<script language="javascript">和</script>了，然后你直接打开query.xml就可以看到效果了。
不知是否对楼主有用，希望对楼主有所帮助。
级联样式表CSS即Cascading Style Sheet(级联样式表)的缩写，我们又常称这为风格样式表Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。级联样式表让您更能有效地控制网页外观。使用级联样式表，您可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。一、在网页上使用样式表 (14、15、16、17、18、19、20、21、22）有三种方法可以在站点网页上使用样式表：将网页链接到外部样式表。在网页上创建嵌入的样式表。应用内嵌样式到各个网页元素。每一种方法均有其优缺点：当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果您决定更改样式，您只需在外部样式表 — 中作一次更改 — 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。当只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。如果网页链接到外部样式表，您为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。二、创建或编辑样式表FrontPage 2000 现在包含有能用来为站点创建外部样式表的模板。您可以用空白模板或已包含样式的模板来创建（例如 Arcs）。当您保存样式表时， FrontPage 会以 . css 作为文件扩展名。要编辑样式表，请双击文件夹列表中的样式表。当您创建或修改网页样式时，可使用位于 “格式” 菜单的 “样式” 命令，FrontPage 会自动创建嵌入的样式表（如果原先不存在），并在嵌入的样式表内将此样式保存为类选择器。您可以使用 “样式” 对话框来创建新类选择器，修改或删除现有类选择器，或将 CSS 格式设置属性应用到标准 HTML 标记符上例如 <H1>。当您单击 “确定” 关闭对话框时，FrontPage 会将格式设置特征写回到使用正确语法的外部或嵌入的样式表中。或者，您可以用正确 CSS 语法键入样式信息。要键入嵌入的样式表的样式信息，请单击网页视图模式下的 “HTML” 选项卡。如果对应用到站点的主题选择 “应用 CSS ” 复选框，FrontPage 将在站点的根目录下创建名为 Theme 1 .css 的文件，其中 Theme 是主题的名称。如果您修改主题，FrontPage 自动将更改写回主题 CSS 里。您也可以通过直接编辑主题 CSS 来修改主题。三、使用样式表要在网页上使用外部样式表的样式，您可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。您可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。该“样式” 框列出标准 HTML 标记符，例如标题 1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然后单击 “样式” 框中的样式或选择器。现在，在 Microsoft FrontPage 2000 中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如∶ <p style="border-style: solid">）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果您只想使用 CSS 应用内嵌样式，您可使用 “样式” 按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。四、删除外部样式表中的样式
