JS实现下拉列表联动

1.

<form name="f1">
<select name="s1" οnchange="chg(document.f1.s1,document.f1.s2)">
<option value="江西">江西</option>
<option value="福建">福建</option>
</select>
<select name="s2">
<option value="1">1</option>
</select>
</form>
<script>
//创建对象,数据,值,文本
function obj(aData,aValue,aText){
this.Data=aData;
this.Value=aValue;
this.Text=aText;
}
//设置选项数据数组,可以添加多个参数为"源地址,选择值,选择文本"
var Set_data=new Array(
new obj('江西','南昌','南昌'),
new obj('江西','九江','九江'),
new obj('福建','福州','福州'),
new obj('福建','厦门','厦门')
);
//该函数接受两个参数——两个下拉菜单
function chg(parent,child){
//以父菜单的选中选项的值,子菜单,和选项数数据组为参数调用chg函数
chgComitem(parent.options[parent.selectedIndex].value,child,Set_data);
}
function chgComitem(parentValue,child,objs){ //改变子菜单
//1.以子菜单为参数调用函数
DelAllComitem(child);
//2.遍历所有的选项数据
for(i=0;i<objs.length;i++){
//如果选项数据的Data与父菜单选中值一样的话
if (objs[i].Data==parentValue)
//3.以子菜单,选项数据的值,选项数据的文本作为参数调用AddComitem
AddComitem(child,objs[i].Value,objs[i].Text);
}
}
//1.删除子菜单的所有元素
function DelAllComitem(aList){
//传入的是select元素,让options全为null
for(i=aList.options.length-1;i>=0;i--)
aList.options[i]=null;
}
//3.添加子菜单的元素
function AddComitem(aList,aValue,aText){
//用传入的文本和值来创建option
var aOption=new Option(aText,aValue);
//插入option(注:length属性比最大下标大1)
aList.options[aList.options.length]=aOption;
}
</script>

2.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值