<!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>
<script type="text/javascript">
    
    function showCity(){
        //维护一个二维数组存储省份对应的城市
        var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];            
    
        //获取省份对应的节点
        var provinceNode = document.getElementById("province");
        //获取省份选中的选项
        var selectIndex =  provinceNode.selectedIndex;
        //获取对应的城市
        var  cityDatas = citys[selectIndex];
        
        //找到city节点
        var cityNode = document.getElementById("city");
        
        /*
        //先清空city框所有option
        var children = cityNode.childNodes;
        for(var i = 0; i<children.length ; ){
            cityNode.removeChild(children[i]);
        }
        */
        
        //设置options的个数。
        cityNode.options.length = 1 ;
        
        
        
        //遍历对应的所有城市然后创建对应的option添加到city上。
        for(var index = 0; index<cityDatas.length ; index++){
            var option = document.createElement("option");
            option.innerHTML = cityDatas[index];
            cityNode.appendChild(option);
        }
        
        
    
    }
    
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    省份<select id="province" onchange="showCity()">
            <option>省份</option>
            <option>广东</option>
            <option>湖南</option>
            <option>广西</option>
        </select>
    城市<select id="city"><option>城市</option></select>
    
</body>
</html>

HTML城市联动的更多相关文章

  1. 全国三级城市联动 js版

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

  2. JQUERY省、市、县城市联动选择

    JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景   开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...

  3. JS中简单的二级城市联动

    代码奉上: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    < ...

  4. 城市联动 - 自动生成SQL语句

    字段比较简单/  如果有需要可以自己定制字段和排序/ 一共二级城市联动, 本人业务需要, 所以就两层, 网上关于三层的挺多, 有需要可以借鉴/ 废话不多说, 先看效果图, 代码在下面 <?php ...

  5. java基础68 JavaScript城市联动框（网页知识）

    1.城市联动框 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

  6. Jquery 插件开发——citylinkage（省、市、县城市联动选择）

    第一部分:背景  开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...

  7. jQuery+ajax城市联动

    分享一下自己最近写的城市联动.技术使用ajax+jQuery实现. 首先请看前台的javascript代码. 以下是连个实现异步加载的方法. <script type="text/ja ...

  8. thinkPHP三级城市联动

    html+js: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  9. 通过城市联动实时将地址显示到text中

    <div class="form-group field-supplier-sort <?php if($model->getErrors('province_id') | ...

  10. vue select二级城市联动及第二级默认选中第一个option值

    当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine&qu ...

随机推荐

  1. codevs——1081 线段树练习 2

    1081 线段树练习 2  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master 题解       题目描述 Description 给你N个数,有两种操作 1:给 ...

  2. OCP知识点讲解 之 队列、资源与锁:RHCA|OCM|CCIE RedHat大中华地区前50位RHCA系统架构师:叶绍琛

      一.队列与共享资源 共享资源可以被多个会话.进程同时访问,因此它的访问需要保护.Oracle中,除了PGA,所有的东西(包括内存.磁盘.CPU.表.索引.事务等等,种类太多,一概用东西两字来代表) ...

  3. hadoop2.2集群搭建问题只能启动一个datanode问题

    按照教程http://cn.soulmachine.me/blog/20140205/搭建总是出现如下问题: 2014-04-13 23:53:45,450 INFO org.apache.hadoo ...

  4. Hadoop 执行过程中出现 name node is in safe mode 问题

    解决方法: 1.进入hadoop安装根目录 如 :我的hadoop 安装在/usr/local/hadoop 执行 cd /usr/local/hadoop bin/hadoop dfsadmin - ...

  5. 让你完全理解base64是怎么回事

    HTTP将BASE64-编码用于基本认证和摘要认证,在几种HTTP扩展中也使用了该编码. Base-64编码保证了二进制数据的安全 Base-64编码可以将任意一组字节转换为较长的常见文本字符序列,从 ...

  6. Mac OS 10.10.3下Apache + mod_wsgi配置【一】

    [一] 首先,MAC是自带Apache的,在/private/etc/apache2路径下,能够使用apachectl -v查看版本号.我的版本号例如以下: Server version: Apach ...

  7. 获取Linux磁盘分区的UUID

    在设置fstab自动挂载时,需要填写如下的信息: # <file system> <mount point> <type> <options> < ...

  8. GDI+学习之------ 画线、区域填充、写字

    <精通GDI编程>里的代码.在学习过程中对它加以总结,以防以后用到,全部代码都是在MFC 单文档中实现的,写在View::OnDraw(CDC */*pDC*/)中 画线/边框(Pen) ...

  9. java SocketChannel and ServerSocketChannel

    1 SocketChannel 1.1 打开一个SocketChannel SocketChannel socketChannel = SocketChannel.open(); socketChan ...

  10. 万一的Delphi消息教程

    http://www.cnblogs.com/del/category/134064.html