<!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. RabbitMQ集群环境搭建教程收集（待实践）

    先收集,后续再实践. http://www.linuxidc.com/Linux/2016-10/136492.htm http://www.cnblogs.com/lion.net/p/572547 ...

  2. MongoDB小结05 - update【$set & $unset】

    用$set指定一个键的值,如果不存在,就创建它.这对更新模式或者增加用户定义很有帮助. db.user.insert({"name":"codingwhy.com&quo ...

  3. zip4j加密压缩、解压缩文件、文件夹

    原文:http://blog.csdn.net/k21325/article/details/54376188 1.首先,引用到zip4j的第三方类库,感谢作者的无私奉献,官网打不开,这里就不贴了,下 ...

  4. Unix时间戳(Unix timestamp)转换

    http://tool.chinaz.com/Tools/unixtime.aspx 如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)? Java time JavaScr ...

  5. node-npm/yarn

    很多人对npm或yarn了解甚少吧,下面我介绍一下常用的yarn/npm所谓的包管理工具. 首先我先介绍一下,npm属于国外Google镜像(下载贼慢),yarn属于Facebook开发的. npm: ...

  6. 再探gdb经常使用命令

     前面已经有了一篇对gdb经常使用命令的总结.见 http://blog.csdn.net/u011848617/article/details/12838875 这里对眼下学过的gdb命令进行了 ...

  7. hdu1115 Lifting the Stone（几何，求多边形重心模板题）

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=1115">http://acm.hdu.edu.cn/showproblem.php ...

  8. Android自己定义dialog中的EditText无法弹出键盘的解决

    近期我独立开发的项目<全医会>已经在内測其中了.非常快将会上架到各大应用市场.之前开发的几个项目都由于一些原因没有上架还是比較遗憾的.所以,近期我心情格外的好. 今天在做一个新项目,专为律 ...

  9. SpringMVC_1

    //@SessionAttributes(value={"user"},types={String.class}) @Controller public class SpringM ...

  10. Jenkins重启 在Windows GUI上

    To restart Jenkins manually, you can use either of the following commands: (jenkins_url)/safeRestart ...