二级联动下拉列表

<html>
<head>
<title>This is a test!</title>
</head>
<body>
<form name="frm">
<select name="s1" onChange="redirec(document.frm.s1.options.selectedIndex)">
<option selected>请选择</option>
<option value="1">脚本语言</option>
<option value="2">高级语言</option>
<option value="3">其他语言</option>
</select>

<select name="s2">
<option value="请选择" selected>请选择</option>
</select>
</form>
<script language="javascript">
//获取一级菜单长度
var select1_len = document.frm.s1.options.length;
var select2 = new Array(select1_len);
//把一级菜单都设为数组
for (i=0; i<select1_len; i++)
{ select2[i] = new Array();}
//定义基本选项
select2[0][0] = new Option("请选择", " ");

select2[1][0] = new Option("PHP", " ");
select2[1][1] = new Option("ASP", " ");
select2[1][2] = new Option("JSP", " ");

select2[2][0] = new Option("C/C++", " ");
select2[2][1] = new Option("Java", " ");
select2[2][2] = new Option("C#", " ");

select2[3][0] = new Option("Perl", " ");
select2[3][1] = new Option("Ruby", " ");
select2[3][2] = new Option("Python", " ");
//联动函数
function redirec(x)
{
var temp = document.frm.s2;
for (i=0;i<select2[x].length;i++)
{ temp.options[i]=new Option(select2[x][i].text,select2[x][i].value);}
temp.options[0].selected=true;
}
</script>
</body>
</html>

效果

时间: 2024-11-14 00:45:04

二级联动下拉列表的相关文章

Ajax二级联动下拉列表

客户端与服务器端采用XML进行通信. 程序中涉及到了xml文件的组装发送和解析. 服务器端 public class CityServlet extends HttpServlet { private static final String CONTENT_TYPE ="text/xml; charset=utf-8"; public CityServlet(){ super() ; } public void destroy(){ super.destroy(); } /** * 数

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

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JavaScript 数组 二级联动下拉列表

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

二级联动列表

<!DOCTYPE HTML><html><head><title>二级联动列表</title><meta charset="utf-8" /><style> .hide{ display: none; }</style><script> /*实现“省”和“市”的级联下拉列表*/ var cities=[[], /*0号下标没有元素*/[{"name":'东城

JavaScript省市二级联动

cities.xml <?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通

省市二级联动

先是构建好HTML代码,通过下拉框来实现功能: 通过jQuery来实现代码: 1.先要引入jar包 2.接下里10步完成二级联动效果:主要是定位获取用户选择的省份--------清楚第二个下拉列表中的内容----创建二维数组用于存放省份和城市----遍历二维数组中的省份- ---判断用户选择的省份和遍历的省份----遍历该省份下面所的城市----创建城市文本节点----创建option元素节点-- --将城市节点存放到option节点中去----将option节点追加到第二个下拉列表中去 3.具

Dwz下拉菜单的二级联动

在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref. ref 属性则是为了做级联定义的,ref所指向的则是当前combox值改变成引起联动的下一级combox,ref用下一级combox的id属性来赋值.注意:一般combox没必要设置id属性,只要级联时需要设置子级id等于父级ref,不同navTab和dialog中combox组件id必须唯一 以下是DWZ框

Ajax实现的城市二级联动二

上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> 2.JS /* * 省份信息和城市信息全部来源于服务器端 * * 第一

ajax实现二级联动

用js实现简单的ajax二级联动(如上图) HTML代码: 1 省份:<select id="province" onchange="getCity();" > 2 <option>请选择--</option> 3 </select> 4 城市:<select id="city"> 5 <option>请选择--</option> 6 </select>