JS实现下拉列表联动-白红宇

JS实现下拉列表联动

阅读量：4102 次

发布时间：2019-05-25

本文共 2369 字，大约阅读时间需要 7 分钟。

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

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组

var city=[

["北京","天津","上海","重庆"],

["南京","苏州","南通","常州"],

["福州","福安","龙岩","南平"],

["广州","潮阳","潮州","澄海"],

["兰州","白银","定西","敦煌"]

];

function getCity(){

//获得省份下拉框的对象

var sltProvince=document.form1.province;

//获得城市下拉框的对象

var sltCity=document.form1.city;

//得到对应省份的城市数组

var provinceCity=city[sltProvince.selectedIndex - 1];

//清空城市下拉框，仅留提示选项

sltCity.length=1;

//将城市数组中的值填充到城市下拉框中

for(var i=0;i<provinceCity.length;i++){

sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);

}

</script>

</HEAD>

<BODY>

<OPTION VALUE="0">请选择所在省份 </OPTION>

</SELECT>

<OPTION VALUE="0">请选择所在城市 </OPTION>

</SELECT>

</FORM>

</BODY>

</HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

function setSecond(obj){

var val = obj.value;

if(val == 'en'){

var sec = document.getElementById('second');

sec.options[0] = new Option("one","one");

sec.options[1] = new Option("two","two");

}else{

var sec = document.getElementById('second');

sec.options[0] = new Option("一","one");

sec.options[1] = new Option("二","two");//可设置循环配置，也可一个一个配置

}

</script>

</head>

<body>

<div>

</select>

</div>

<div>

</select>

</div>

</body>

</html>

转载地址：http://vqusi.baihongyu.com/

你可能感兴趣的文章

Android编译系统中的Android.bp

查看>>

如何在ota升级时将data分区也打入升级包一并升级data分区

Android添加资源文件编译，R文件未重新生成解决办法

查看>>

android 触屏反馈原理

查看>>

android 4.0.3 usb插拔提示音播放问题分析

查看>>

android jni代码编写规则--整理总结

查看>>

智能家居第一步： WiFi 设备怎么连上网

查看>>

【Android开发—智能家居系列】（一）：智能家居原理

android 空调遥控器——红外设备（基础）

查看>>

android 空调遥控器——简单发送内容

查看>>

android 空调遥控器——遥控器基本版（功能全部实现）

查看>>

手机里竟然有这么多传感器！终于都搞懂了

查看>>

OneNET平台物联网接入完整代码（设备端+web服务器端）对外开放

查看>>

高通平台MSM8916LCM模块移植（一）-bootloader部分

查看>>

软件工程师必须知道20个知识点

查看>>

Android 如何永久性开启adb 的root权限

查看>>