js 下拉列表 省 市

<!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">

//好像不是这样子

var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省","河南省"];

var arr_city = [

                ["请选择城市/地区"],

                ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],

                ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],

                ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],

                ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],

                ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],

                ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'],

                ['郑州市']

            ];

//函数：当省份中的option改变时，城市中的数据应该相应的改变

function select_change(index)

{

    var city = document.form1.city;

    //根据当前index确定city中要写入的二维数组是哪一个

    city.length = 0;

    city.length = arr_city[index].length;

    for(var i=0;i<arr_city[index].length;i++)

    {

        //创建每一个option对象(option标记)

        city.options[i].text = arr_city[index][i];

        city.options[i].value = arr_city[index][i];

    }

}

//函数：给province对象添加option对象，每个option的内容来自于arr_province

function init()

{

    //获取province和city对象

    var province = document.form1.province;

    var city = document.form1.city;

    //指定下拉列表的高度，准备写入几个option的标记(很重要)

    province.length = arr_province.length;                     //这句必须有

    //循环数组，将数组内容写入到province中去

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

    {

        //创建每一个option对象(option标记)

        province.options[i].text = arr_province[i];

        province.options[i].value = arr_province[i];

    }

    //指定省份当前的默认选中索引号

    var index = 0;

    province.selectedIndex = index;

    //对象city的内容来自于province的选择

    //我们默认指定一个option，一般是下标为0的那个

    city.length = arr_city[index].length;

    for(var j=0;j<arr_city[index].length;j++)

    {

        //创建每一个option对象(option标记)

        city.options[j].text = arr_city[index][j];

        city.options[j].value = arr_city[index][j];

    }

}

</script>

</head>

<body onload="init()">

<form name="form1">

省份：<select name="province" onchange="select_change(this.selectedIndex)" style="width:130px;"></select>

城市：<select name="city"></select>

</form>

</body>

</html>

js 下拉列表 省 市的更多相关文章

  1. JS 省，市，区

    // 纯JS省市区三级联动 // 2011-11-30 by http://www.cnblogs.com/zjfree var addressInit = function (_cmbProvinc ...

  2. js下拉列表

    js清除下拉列表所选默认值 $("#lineId").val(“”); js清除下拉列表所有选项 $("#type").html(""); ...

  3. js下拉列表选中

    var monthobj = document.getElementById("pid");// for(var i=0; i<monthobj.options.length ...

  4. 省市区县镇级联数据JS版

    前言:网站开发经常会涉及到报名,报名通常就会有地区级联的要求.如下所示.做这个功能就必须要有数据支撑.昨天努力了一天,从网上鼓捣了一份数据.分享下.纯技术性分享,非盈利的.如果有侵权的地方请知会,马上 ...

  5. html学习笔记（一）

    认识网页 网页组成 由文字.图片.输入框.视频.音频.超链接等组成. web标准 W3C组织(万维网联盟) Html (结构标准 ),相当人的身体. Css 样式(表现)标准 , 相当与给人化妆 变的 ...

  6. Laravel5.1 搭建博客 --文章的增删改查

    教程源于:Laravel学院 继文件上传后呢,咱来搞一搞文章的事情. 1 更改数据表 我们需要改改数据表的结构 因为涉及到重命名列名 所以咱需要引入一个包:Doctrine: composer req ...

  7. select2的简单使用

    静态下拉列表 修改 type_template.html  引入JS <!-- slect2插件--> <link rel="stylesheet" href=& ...

  8. HTML笔记(三) 表格和列表

    本篇记录表格 (table) 和有序列表 (ordered list) \ 无序列表 (unordered list) 的部分用法 1.表格table 表格标签 使用 <table> 定义 ...

  9. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

随机推荐

  1. hdu 1003 Max Sum(动态规划)

    解题思路: 本题在给定的集合中找到最大的子集合[子集合:集合的元素的总和,是所有子集合中的最大解.] 结果输出: 最大的子集合的所有元素的和,子集合在集合中的范围区间. 依次对元素相加,存到一个 su ...

  2. win7打开网页老是提示下载网页解决办法

    方法:我的系统是windows 7 旗舰版, 解决方法可以自己手动去修复,方法是进入命令窗口. 开始--运行--cmd--sfc.exe--sfc/scannow   修复一下!

  3. 新浪微博客户端(22)-创建微博Cell

    DJStatusCell.h #import <UIKit/UIKit.h> @class DJStatusCellFrame; @interface DJStatusCell : UIT ...

  4. CNN 美国有线电视新闻网 wapCNN WAP 指无线应用通讯协议 ---- 美国有线电视新闻网 的无线应用

    wapCNN  wap指无线应用通讯协议  CNN美国有线电视新闻网   固, wapCNN 美国有线电视新闻网的无线应用 -------------------------------------- ...

  5. ACM Computer Factory（dinic）

    ACM Computer Factory Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5596   Accepted: 1 ...

  6. [Effective JavaScript 笔记]第24条：使用变量保存arguments对象

    迭代器(iterator)是一个可以顺序存取数据集合的对象.其一个典型的API是next方法.该方法获得序列中的下一个值. 迭代器示例 题目:希望编写一个便利的函数,它可以接收任意数量的参数,并为这些 ...

  7. Linux守护进程的启动方法

    导读 “守护进程”(daemon)就是一直在后台运行的进程(daemon),通常在系统启动时一同把守护进程启动起来,本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 Web应用写好后 ...

  8. ReactiveCocoa入门教程：第一部分

    http://www.cocoachina.com/ios/20150123/10994.html 本文翻译自RayWenderlich,原文:ReactiveCocoa Tutorial--The ...

  9. hiho一下第88周《Coordinates》

    题目大意 给定数字P,Q,求出所有P和Q的约数p,q能够组成的不重复数字对(p,q) 解题思路 作为本场比赛的第一题,本题的难度在于考察选手是否有基本的编程能力. 本题中需要求出P,Q所有约数组成的数 ...

  10. HDU 2897

    Problem Description 当日遇到月,于是有了明.当我遇到了你,便成了侣. 那天,日月相会,我见到了你.而且,大地失去了光辉,你我是否成侣?这注定是个凄美的故事.(以上是废话) 小t和所 ...