js 二级联动的下拉列表菜单效果

文章提供一款js 二级联动的下拉列表菜单效果哦,这是一款城市联动菜单效果,如果你正js联动菜单,可以进来看看,这是利用了一个数组来保存所有城市,然后再select下拉框放城市,每一个二维数组都是对任的城市。

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<script language="网页特效" type="text/javascript">
<!--
//按照省份下拉列表框的顺序定义二维数组,将城市列表对应到省份
var city=[
 ["北京","天津","上海","重庆"],  //直辖市
 ["南京","苏州","南通","常州"],  //江苏省
 ["福州","福安","龙岩","南平"],  //福建省
 ["广州","潮阳","潮州","澄海"],  //广东省
 ["兰州","白银","定西","敦煌"]  //甘肃省
];

function getcity(){
 //获得身省份和城市下拉列表框的引用
 var sltprovince=document.forms["theform"].elements["province"];
 var sltcity=document.forms["theform"].elements["city"];
 //得到对应于省份的城市列表数组
 var provincecity=city[sltprovince.selectedindex-1];
 
 //将城市下拉列表框清空,仅留第一个提示选项
 sltcity.length=1;
 //将相应省市的城市填充到城市选择框中
 for(var i=0;i<provincecity.length;i++){
  //创建新的option对象并将其添加到城市下拉列表框中
  sltcity[i+1]=new option(provincecity[i],provincecity[i]);
 }
}
//-->
</script>
</head>
<body>

<form action="somepage.asp教程" name="theform">
<select name="province" onchange="getcity()">
 <option value="0">请选择所在省份</option>
 <option value="直辖市">直辖市</option>
 <option value="江苏省">江苏省</option>
 <option value="福建省">福建省</option>
 <option value="广东省">广东省</option>
 <option value="甘肃省">甘肃省</option>
</select>
<select name="city">
 <option value="0">请选择所在城市</option>
</select>
</form>
</body>
</html>

时间: 2024-09-28 18:53:13

js 二级联动的下拉列表菜单效果的相关文章

js 二级横向滑动导航菜单效果代码

提示:您可以先修改部分代码再运行 js 二级横向滑动导航菜单效果代码 网站首页 JS代码 电子商务 免费模板 建站技巧 CSS技巧 CSS导航菜单 网络营销 SEO优化 免费模板-网页模板下载 网站公告:免费模板征集友情链接 免费模板 免费模板 免费模板 免费模板 免费模板 网页特效 免费模板 免费模板 网络营销 网络营销 网络营销 网络营销 网络营销 网页特效 免费模板 网页特效 网络营销 网络营销 免费模板 服务器租用首页 网络营销 网络营销 超级机房 免费模板 免费模板 免费模板 免费模板

PHP地区二级联动下拉菜单代码

<?php header('Content-Type: application/json; charset=utf-8'); echo 'province=[];'; foreach ($arrProvinces as $province) { echo 'province.push(['.$province['ProvinceID'].',"'.$province['ProvinceName'].'"]);'; } echo 'city=[];'; foreach ($arrC

最简单js代码实现select二级联动下拉菜单_javascript技巧

本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

JS+CSS实现简单的二级下拉导航菜单效果_javascript技巧

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

jQuery+PHP+MySQL二级联动下拉菜单实例讲解_jquery

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果.实现效果:当选择大类时,小类下拉框里的选项内容也随着改变. 实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理.XHTML首先我们要建立两个下拉选择框,第一个是大类,第二个是小类.大类的值可以是预先写好,也可以是从数据库读取. <label>

ajax+php无刷新二级联动下拉菜单(省市联动)源码

ajax.js /** * ajax无刷新二级联动下拉菜单(省市联动) * * @author arcow <arcow@126.com> * @version 1.0 * @lastupdate 2005-12-29 * */ var http_request = false; function send_request(url,method) {//初始化.指定处理函数.发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象 if(win

javascript支持区号输入的省市二级联动下拉菜单_javascript技巧

省市二级联动下拉菜单,增加了区号输入.多组选项共用一组数据. 选择地区,可以获取区号,填写区号自动选取地区. 某些地市的区号收集中. 省份选择城区 省份选择城区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

JS模拟bootstrap下拉菜单效果实例_javascript技巧

本文实例讲述了JS模拟bootstrap下拉菜单效果.分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似于bootstrap 的"下拉菜单" 由于bootstrap的子菜单的样式与设计不同,因此需要自己写一个类似的效果 当点击某个控件的时候,则显示出下拉菜单,但是,当点击空白的地方的时候怎么让其自动隐藏呢? 起初的想法,给body绑定一个onclick事件,当点击空白的

jquery实现简单的二级导航下拉菜单效果_jquery

本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl