<!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. HDU——1285 确定比赛名次

    确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  2. js转xml时 将xml中不需要的字符替换掉的方法replace()

    js中 replace(/\//g, '') 什么作用. 正则表达式 replace(/\//g, '') 的作用是把/替换成''. 用法如下: 比如:var aa= "adsdd/sdsd ...

  3. Eclipse编辑YAML插件-YEdit

    官网:https://github.com/oyse/yedit 离线版本:(链接: https://pan.baidu.com/s/1b1j2gQ 密码: wyyb) 安装方法:直接复制JAR包到P ...

  4. Office高级威胁漏洞在野利用分析

    高级威胁漏洞背景 在高级威胁攻击中,黑客远程投递入侵客户端最喜欢的漏洞是office文档漏洞,就在刚刚结束不久的黑帽子大会上,最佳客户端安全漏洞奖颁给了CVE-2017-0199漏洞,这个漏洞是时下o ...

  5. Ubuntu14.04 忘记rootpassword的解决方法

    对于windows操作系统,假设忘记管理员password,事实上还是蛮好解决的. 最简单的一种方式就是使用PE--电脑店,老毛桃等等,都能够非常完美的解决问题. 假设是Linux操作系统的话.事实上 ...

  6. C#高级编程四十八天----列表

    C#中的List C#中deList怎么样?List<T>类是ArrayList类的泛型等效类,该类使用大小可按需动态增长的数组实现List<T>泛型接口. 泛型的优点:它为使 ...

  7. ssh 远程登陆指定port

    ssh 到指定port  ssh -p xx user@ip      xx 为 port号    user为username   ip为要登陆的ip

  8. 水晶报表 Crystal Report 调用存储过程时出错 找不到表 ，解决方法。

    用 CrystalReportViewer1 控件在asp.net的网页上显示报表,假设做报表时调用数据表数据的方式调用是能够成功的.但报表是用存储过程获取数据方式会出现下面错误: 找不到表'RptO ...

  9. 异步FIFO的编程

    对于异步FIFO.最基本的两个方面是地址控制和空.满标志位的产生.首先地址控制分别为读地址和写地址,每次读写时能读写地址应该加1.计数次数为ram深度的2倍.当读写地址相等时则空标志位有效,当读写地址 ...

  10. docker映射端口与ssh访问或容器访问

    映射端口 -d 后台执行 -p映射端口 --privileged 可以使用systemctl # docker run --privileged -d -p 9000:80 jiqing9006/ce ...