Javascript实现三级联动选单

javascript

公司有人要,写了一个,放上来,有要得copy去用吧,下面是第一种option的value和text是一个值得方式,下面再贴不同值得方式。

运行代码框

<form method="post" name="test"><select name="select1" ></select><select name="select2"></select><select name="select3"></select></form><script language="javascript"><!--//copyright siginie(siginie@hotmail.com),www.3ad.cnvar arrText = new Array(5);var arrValue = new Array(arrText.length);function objSetOption(select1, select2, select3) {this.select1 = select1;this.select2 = select2;this.select3 = select3;}arrText[0]= new objSetOption("选择1:", "选择2_1:,选择2_2:", "选择3_1:,选择3_2:");arrText[1] = new objSetOption("论文:1", "语文:1,数学:2,英语:3", "初中:2,高中:3");arrText[2] = new objSetOption("例题:2", "显示b2_1:值b2_1,显示b2_2:值b2_2", "显示b3_1:值b3_1,显示b3_2:值b3_2");arrText[3] = new objSetOption("显示c:值c", "显示c2_1:值c2_1,显示c2_2:值c2_2", "显示c3_1:值c3_1,显示c3_2:值c3_2");arrText[4] = new objSetOption("显示d:值d", "显示d2_1:值d2_1,显示d2_2:值d2_2", "显示d3_1:值d3_1,显示d3_2:值d3_2");arrText[5] = new objSetOption("显示e:值e", "显示e2_1:值e2_1,显示e2_2:值e2_2", "显示e3_1:值e3_1,显示e3_2:值e3_2");function select() {var eltSelect1 = document.test.select1;var eltSelect2 = document.test.select2;var eltSelect3 = document.test.select3;var arrSelect1, arrSelect2, arrSelect3;var arrData1, arrData2, arrData3;with(eltSelect1) {var strSelect = options[selectedIndex].value;}for(i = 0;i < arrText.length;i ++) {arrSelect1 = arrText[i].select1;arrData1 = arrSelect1.split(":");if (arrData1[1] == strSelect) {arrSelect2 = (arrText[i].select2).split(",");for(j = 0;j < arrSelect2.length;j++) {arrData2 = arrSelect2[j].split(":");with(eltSelect2) {length = arrSelect2.length;options[j].text = arrData2[0];options[j].value = arrData2[1];}}arrSelect3 = (arrText[i].select3).split(",");for(j = 0;j < arrSelect3.length;j++) {arrData3 = arrSelect3[j].split(":");with(eltSelect3) {length = arrSelect3.length;options[j].text = arrData3[0];options[j].value = arrData3[1];}}break;}}}function init() {var eltSelect1 = document.test.select1;var eltSelect2 = document.test.select2;var eltSelect3 = document.test.select3;var arrSelect1, arrSelect2, arrSelect3;var arrData1, arrData2, arrData3;if (eltSelect1 != undefined && eltSelect2 != undefined && eltSelect3 != undefined) {with(eltSelect1) {length = arrText.length;for(i = 0;i < arrText.length;i ++) {arrSelect1 = arrText[i].select1;arrData1 = arrSelect1.split(":");options[i].text = arrData1[0];options[i].value = arrData1[1];}}with(eltSelect2) {arrSelect2 = (arrText[0].select2).split(",");length = arrSelect2.length;for(i = 0;i < length;i ++) {arrData2 = arrSelect2[i].split(":");options[i].text = arrData2[0];options[i].value = arrData2[1];}}with(eltSelect3) {arrSelect3 = (arrText[0].select3).split(",");length = arrSelect3.length;for(i = 0;i < length;i ++) {arrData3 = arrSelect3[i].split(":");options[i].text = arrData3[0];options[i].value = arrData3[1];}}}}init();// --></script>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-12-20 13:06:25

Javascript实现三级联动选单的相关文章

javascript省市区三级联动下拉框菜单实例演示_javascript技巧

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

php+javascript实现三级联动菜单

php教程+网页特效实现三级联动菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

javascript实现简单的省市区三级联动_javascript技巧

当我们注册一个网站,会看到省市区三级联动,下面简单介绍一下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content="&q

javascript解析xml实现省市县三级联动的方法_javascript技巧

本文实例讲述了javascript解析xml实现省市县三级联动的方法.分享给大家供大家参考.具体实现方法如下: (该方法适用于任何常用浏览器) <body> <div> <span> <select id="sheng" style="width: 100px"></select> </span> <span> <select id="shi" style=

jquery+json 通用三级联动下拉列表效果代码

jquery+json 通用三级联动下拉列表效果代码 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进 第三个与第二个其实是一样的,只不过将数据分离到JS文件中,我的代码中有一个ASP文件,是调用数据库教程生成Json省市区数据的,如果页面直接调用AS

jquery+json 通用三级联动下拉列表_jquery

Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

javascript实现简单的省市区三级联动

  本文给大家反映的是javascript实现的简单的省市区三级联动特效,不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动.当省市区数据变动是只需调正js即可. 当我们注册一个网站,会看到省市区三级联动,下面简单介绍一下 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 4

用JavaScript实现动态省市县三级联动

 像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码_javascript技巧

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl