<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选择菜单</title>
<script type="text/javascript">
function selectedCity(proObj){
var proValue = proObj.value;
var cityObj = document.getElementById("cityId");
cityObj.options.length=1;
if(proValue=="请选择省份")
return;
//声明 cityboj 元素
var cityArrays = new Array();
cityArrays["陕西省"] = ["西安","咸阳","榆林"]; // 数组 中文下标
cityArrays["山西省"] = ["太原","大同","运城"];
cityArrays["广东省"] = ["广州","深圳","中山"];
cityArrays["河南省"] = ["洛阳","郑州","开封"];
cityArrays["甘肃省"] = ["兰州","天水","酒泉"];
//添加 cityboj 数组元素
for(var i=0;i<cityArrays[proValue].length;i++){
var newOption = new Option(cityArrays[proValue][i],cityArrays[proValue][i]);
cityObj.add(newOption);
}
}
function selectedSchool(cityObj){
var cityValue = cityObj.value;
var schoolObj = document.getElementById("schoolId");
schoolObj.options.length=1;
if(cityValue=="请选择城市")
return;
var schoolArrays = new Array();
schoolArrays["西安"] = ["交大","西工大","西电"];
schoolArrays["咸阳"] = ["4","5","6"];
schoolArrays["榆林"] = ["7","8","9"];
for(var i=0;i<schoolArrays[cityValue].length;i++){
var newOption = new Option(schoolArrays[cityValue][i],schoolArrays[cityValue][i]);
schoolObj.add(newOption);
}
}
</script>
</head>
<body>
<table width="200" border="0" align="center">
<tr>
<td>
<select name="province" onchange="selectedCity(this)">
<option value="请选择省份">请选择省份</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
<option value="河南省">河南省</option>
<option value="甘肃省">甘肃省</option>
</select>
</td>
<td>
<select name="city" id="cityId" onchange="selectedSchool(this)">
<option value="请选择城市">请选择城市</option>
</select>
</td>
<td>
<select name="school" id="schoolId" >
<option value="请选择学校">请选择学校</option>
</select>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
这是我自己编写的一个批处理选择菜单，这是我上传至本网站的第一个资源，希望大家多多支持吧！
使用javaScript开发的左右选择菜单
省地市三级下拉选择菜单插件1.0.mxp
在本例中，“asp+js 三级联动选择菜单”是一个结合了这两种技术的实现，用于创建一个能够动态响应用户选择的三级下拉菜单。 1. **ASP原理**： ASP允许开发者在服务器端编写脚本，这些脚本可以处理数据、与数据库...
在IT行业中，构建用户友好的交互界面是至关重要的，尤其是对于餐饮类应用，如美团，其选择菜单的设计直接影响用户体验。本项目"仿美团选择菜单，可直接运行"旨在提供一个可快速部署、易于定制的选择菜单解决方案，...
"带选择菜单的按钮"是一种常见的UI元素，它集成了多种功能，为用户提供更高效、直观的操作方式。这种设计允许用户在一个单一的按钮上执行多个操作，提高了交互效率，尤其在空间有限的界面中显得尤为重要。 首先，...
在本文中，我们将深入探讨如何使用AngularJS实现二级联动选择菜单。AngularJS，作为一个强大的前端JavaScript框架，提供了丰富的功能和工具来构建动态、交互式的Web应用程序。二级联动选择菜单是常见的用户界面元素...
在网页开发中，为了实现用户友好且高效的交互，经常需要用到级联选择菜单，尤其是在处理地理信息时，如省市区县的选择。本资源提供了一个“超漂亮的基于jquery的H5省市区县三级地区级联选择菜单”，它专为wap和HTML5...
自己实现的选择菜单特效
《JS弹出层风格全国城市选择菜单的实现与解析》 在网页设计中，用户交互体验是至关重要的因素之一，而高效、友好的选择菜单则是提升用户体验的关键元素。本篇文章将详细探讨“js弹出层风格的全国城市选择菜单”的...
本资源"安卓SlidingMenu各种菜单侧滑菜单相关-双层转盘旋转选择菜单.rar"似乎包含了一个实现此类功能的示例项目，特别是重点在于双层转盘旋转选择菜单的设计。 双层转盘旋转选择菜单是一种独特的交互方式，它提供了...
《jQuery搜索下拉框选择菜单插件：提升用户体验的新维度》 在网页设计与开发中，用户界面（UI）和用户体验（UX）是至关重要的因素。一个高效且友好的交互设计能够极大地提升用户对网站的满意度。jQuery作为一款强大...
《jQuery输入框下拉选择菜单》 在网页开发中，我们常常需要实现用户友好且功能丰富的交互效果。其中，输入框下拉选择菜单是一种常见的组件，它能够提供一个高效的筛选和选择方式，使得用户能够在大量数据中快速找到...
"jQuery select双向选择菜单"是一个利用jQuery实现的功能组件，它允许用户在两个下拉菜单之间进行双向选择，提高了用户在操作数据时的便捷性和效率。 首先，我们要理解什么是jQuery。jQuery是一个轻量级的...
【双层转盘旋转选择菜单】是一种交互设计技术，常用于移动应用或智能设备的用户界面中，旨在提供用户友好的、高效的导航和选择方式。它由两层独立旋转的菜单构成，每层菜单通常包含若干个选项，用户可以通过旋转这两...
总之，通过C#类和XML，我们可以构建一个灵活且易于维护的多国语言选择菜单。这种方式不仅简化了代码，还使得添加新语言变得简单，只需在XML文件中添加新的语言节点即可。对于希望扩展其软件全球影响力的开发者来说，...
这种情况下，一个高效且用户友好的三级联动选择菜单就显得尤为重要。"jQuery三级地区联动选择菜单jquery-1.9.1.js制作"就是解决此类问题的一个优秀方案。这个项目使用了著名的JavaScript库jQuery，版本为1.9.1，来...
无限级的选择菜单 包括 取值： 取层级值，取最后选项的值 设定值 ： 层级设置，设置唯一的值（自动寻找）
在Swift开发中，针对watchOS平台，圆形选择菜单（Circular Crown Selector）是一种常见的用户界面元素，它能够提供直观且互动性强的交互体验。这个菜单设计通常利用Apple Watch的数码表冠（Digital Crown）进行操作...
"jQuery三级地区联动选择菜单"是一个针对这一需求的解决方案，尤其适用于手机WAP网站。这个压缩包包含了一套使用jQuery 1.9.1版本实现的三级地区（省份、城市、区县）联动选择菜单的源代码。这种联动菜单能够为用户...